使用 Javascript 触发选择表单元素以显示其选项（打开下拉选项列表）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3846735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger a select form element to show its options (open drop down options list) with Javascript
提问by Savvas Georgiou
Here is the markup
这是标记
<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>
and I want to trigger a javascript event so that the option list drops down. Using jquery I've tried the following:
我想触发一个 javascript 事件，以便选项列表下拉。使用 jquery 我尝试了以下方法：
$("#person_prefix").click();
$("#person_prefix").mousedown();
$("#person_prefix").change();
but nothing seems to work. Which event is this and how can be triggered?
但似乎没有任何效果。这是哪个事件以及如何触发？
Thanks
谢谢
回答by Mark Anthony Uy
I was once searching how to do the same thing and didn't find any working solution but then a guy in our javascript group came with a clever work around. Here is the code.
我曾经在搜索如何做同样的事情，但没有找到任何可行的解决方案，但后来我们 javascript 小组中的一个人提出了一个巧妙的解决方法。这是代码。
HTML
HTML
<input type="button" id="show" value="show" />
<select id="myslect">
<option>nothing</option>
<option>something</option>
<option>anything</option>
</select>
Javascript
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.");
}
});
I'm not sure how to link to the group post so you can see the whole thread. Anyway credits to CJ Madolara. Good Job!
我不确定如何链接到群组帖子，以便您可以看到整个线程。无论如何都要归功于 CJ Madolara。做得好！
Update:Only works on Chrome and Safari
更新：仅适用于 Chrome 和 Safari
回答by Nick Craver
You can't do this cross-browser programmatically. You can replacethe dropdown with an entirely custom solution not actually displayinga <select>element...but you can't programmatically show it, especially in IE.
您不能以编程方式跨浏览器执行此操作。您可以替换与一个完全定制的解决方案实际上没有下拉显示一个<select>元素......但你不能以编程方式表现出来，尤其是在IE浏览器。
The closestyou can do is move the user to the element via .focus():
您可以做的最接近的是通过.focus()以下方式将用户移动到元素：
$("#person_prefix").focus();
This with some CSS styling for when it's focused (:focus) is usually a pretty good way to draw attention to it.
当它聚焦 ( :focus)时，它带有一些 CSS 样式通常是引起人们注意的一种很好的方式。
回答by matewka
You can'ttrigger click event on select form element but the proper workaround is this plugin:
jQuery.customSelect
你不能在选择表单元素上触发点击事件，但正确的解决方法是这个插件：
jQuery.customSelect
The great advantage is that it launches the real selectelement (you actually click on an invisible select - opacity: 0), which is important on mobile devices (e.g. iPhone has its own layout for displaying select'soptions).
最大的优点是它启动了真正的select元素（你实际上点击了一个不可见的选择 - opacity: 0），这在移动设备上很重要（例如 iPhone 有自己的显示select's选项布局）。
If you don't want to download the whole plugin you can then prepare the solution on your own since you know how to trigger the select(hide it by setting opacity: 0- it will be still clickable).
如果您不想下载整个插件，您可以自行准备解决方案，因为您知道如何触发select（通过设置隐藏它opacity: 0- 它仍然可以点击）。
回答by kennebec
If you set the sizeattribute the select will display the number of options you specify in size.
如果您设置size属性，select 将显示您在 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)
Setting size back to '1' collapses the select.
将大小设置回“1”会折叠选择。
回答by jsh
building on @kennebec's answer, a jQuery version to get a count of the options and optgroups:
以@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);
