这是标记
<select id="person_prefix" name="prefix">
<option value=""></option>
<option value="Dr" selected="selected">Dr</option>
<option value="Mr">Mr</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
</select>
我想触发一个 javascript 事件，以便选项列表下拉。使用 jquery 我尝试了以下操作：
$("#person_prefix").click();
$("#person_prefix").mousedown();
$("#person_prefix").change();
但似乎没有任何效果。这是哪个事件以及如何触发？
谢谢
我曾经在寻找如何做同样的事情，但没有找到任何可行的解决方案，但后来我们 javascript 小组中的一个人提出了一个巧妙的解决方案。这是代码。
HTML
<input type="button" id="show" value="show" />
<select id="myslect">
<option>nothing</option>
<option>something</option>
<option>anything</option>
</select>
Javascript
$("#show").click(function () {
var element = $("select")[0],
worked = false;
if(document.createEvent) { // chrome and safari
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
worked = element.dispatchEvent(e);
}
if(!worked) { // unknown browser / error
alert("It didn't worked in your browser.");
}
});
我不确定如何链接到群组帖子，以便您可以查看整个线程。无论如何都要归功于 CJ Madolara。做得好！
更新： 仅适用于 Chrome 和 Safari
您不能以编程方式跨浏览器执行此操作。您可以替换与一个完全定制的解决方案实际上没有下拉显示一个<select>元素......但你不能以编程方式表现出来，尤其是在IE浏览器。
您可以做的最接近的是通过.focus()以下方式将用户移动到元素：
$("#person_prefix").focus();
当它聚焦 ( :focus)时，它带有一些 CSS 样式通常是引起人们注意的一种很好的方式。
你不能在选择表单元素上触发点击事件，但正确的解决方法是这个插件：
jQuery.customSelect
最大的优点是它启动了真正的select元素（你实际上点击了一个不可见的选择 - opacity: 0），这在移动设备上很重要（例如 iPhone 有自己的布局来显示select's选项）。
如果您不想下载整个插件，您可以自行准备解决方案，因为您知道如何触发select（通过设置隐藏它opacity: 0- 它仍然可以点击）。
如果您设置size属性，则选择将显示您在 size 中指定的选项数。
var sel= document.getElementsByName('select_1')[0];
var len= '10'// or sel.options.length;
// safest: var len=sel.getElementsByTagName('*').length;
sel.setAttribute('size',len)
将 size 设置回“1”会折叠选择。
以@kennebec 的回答为基础，一个 jQuery 版本，用于计算选项和 optgroups：
var sel = $('select.mySelectClass');
var count=0;
sel.find('option').each(function() {
count++;
});
sel.find('optgroups').each(function() {
count++;
});
sel.attr('size',count);