我可以使用 jQuery 打开下拉列表吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/360431/
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
Can I open a dropdownlist using jQuery
提问by Jon Tackabury
For this dropdownlist in HTML:
对于 HTML 中的这个下拉列表：
<select id="countries">
<option value="1">Country</option>
</select>
I would like to open the list (the same as left-clicking on it). Is this possible using JavaScript (or more specifically jQuery)?
我想打开列表（与左键单击相同）。这是否可以使用 JavaScript（或更具体地说是 jQuery）？
采纳答案by ieure
You can easily simulate a click on an element, but a click on a <select>won't open up the dropdown.
您可以轻松模拟对 element的单击，但单击 a<select>不会打开下拉列表。
Using multiple selects can be problematic. Perhaps you should consider radio buttons inside a container element which you can expand and contract as needed.
使用多个选择可能会有问题。也许您应该考虑容器元素内的单选按钮，您可以根据需要扩展和收缩。
回答by CommentLuv
I was trying to find the same thing and got disappointed. I ended up changing the attribute size for the select box so it appears to open
我试图找到同样的东西，但很失望。我最终更改了选择框的属性大小，因此它似乎可以打开
$('#countries').attr('size',6);
and then when you're finished
然后当你完成时
$('#countries').attr('size',1);
回答by Czarek Tomczak
I've come across the same problem and I have a solution. A function called ExpandSelect() that emulates mouse clicking on "select" element, it does so by creating an another <select>element that is absolutely posioned and have multiple options visible at once by setting the sizeattribute. Tested in all major browsers: Chrome, Opera, Firefox, Internet Explorer. Explanation of how it works, along with the code here:
我遇到了同样的问题，我有一个解决方案。一个名为 ExpandSelect() 的函数模拟鼠标点击“select”元素，它通过创建另一个<select>绝对定位的元素来实现，并且通过设置size属性同时具有多个可见的选项。在所有主要浏览器中测试：Chrome、Opera、Firefox、Internet Explorer。解释它是如何工作的，以及这里的代码：
Edit (link was broken).
编辑（链接已损坏）。
I've created a project at Google Code, go for the code there:
我在 Google Code 上创建了一个项目，去那里找代码：
http://code.google.com/p/expandselect/
http://code.google.com/p/expandselect/
Screenshots
截图
There is a little difference in GUI when emulating click, but it does not really matter, see it for yourself:
模拟点击的时候GUI有一点区别，但其实无所谓，自己看吧：
When mouse clicking:
鼠标点击时：
(source: googlecode.com)
（来源：googlecode.com）
When emulating click:
模拟点击时：
(source: googlecode.com)
（来源：googlecode.com）
More screenshots on project's website, link above.
项目网站上的更多屏幕截图，上面的链接。
回答by Stuart.Sklinar
This should cover it:
这应该涵盖它：
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var
This could be bound for example to a keypress event, so when the element has focus the user can type and it will expand automatically...
例如，这可以绑定到按键事件，因此当元素具有焦点时，用户可以键入并自动展开...
--Context--
- 语境 -
modal.find("select").not("[readonly]").on("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
this.dispatchEvent(event);
});
回答by Chris K
This is spruced up from the answers just above and uses the length/number of options to conform to how many options there actually are.
这是从上面的答案中整理出来的，并使用选项的长度/数量来符合实际有多少选项。
Hope this helps somebody get the results they need!
希望这可以帮助某人获得他们需要的结果！
function openDropdown(elementId) {
function down() {
var pos = $(this).offset(); // remember position
var len = $(this).find("option").length;
if(len > 20) {
len = 20;
}
$(this).css("position", "absolute");
$(this).css("zIndex", 9999);
$(this).offset(pos); // reset position
$(this).attr("size", len); // open dropdown
$(this).unbind("focus", down);
$(this).focus();
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
$(this).focus();
}
$("#" + elementId).focus(down).blur(up).focus();
}
回答by mrperfect
Simple an easy way.
简单的方法。
function down(what) {
pos = $(what).offset(); // remember position
$(what).css("position","absolute");
$(what).offset(pos); // reset position
$(what).attr("size","10"); // open dropdown
}
function up(what) {
$(what).css("position","static");
$(what).attr("size","1"); // close dropdown
}
Now you can call your DropDown just like this
现在你可以像这样调用你的 DropDown
<select onfocus="down(this)" onblur="up(this)">
Works perfect for me.
非常适合我。
Maybe better, because you have no problems with the position of the other elemts on the page.
也许更好，因为您对页面上其他元素的位置没有问题。
function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}
function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}
Change the ID to a fix value mybe not smart but i hope you see the idee.
将 ID 更改为固定值我不聪明，但我希望你能看到这个想法。
回答by colinbashbash
I tried using mrperfect's answer and i had a couple glitches. With a couple small changes, I was able to get it to work for me. I just changed it so that it would only do it once. Once you exit dropdown, it would go back to the regular method of dropdowns.
我尝试使用 mrperfect 的答案，但遇到了一些小故障。通过一些小的更改，我能够让它为我工作。我只是改变了它，让它只做一次。退出下拉菜单后，它将返回到常规的下拉菜单方法。
function down() {
var pos = $(this).offset(); // remember position
$(this).css("position", "absolute");
$(this).offset(pos); // reset position
$(this).attr("size", "15"); // open dropdown
$(this).unbind("focus", down);
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
}
function openDropdown(elementId) {
$('#' + elementId).focus(down).blur(up).focus();
}
回答by vipergtsrz
One thing that this doesn't answer is what happens when you click on one of the options in the select list after you have done your size = n and made it absolute positioning.
这没有回答的一件事是，当您完成 size = n 并使其绝对定位后单击选择列表中的选项之一时会发生什么。
Because the blur event makes it size = 1 and changes it back to how it looks, you should have something like this as well
因为模糊事件使它 size = 1 并将其改回它的外观，所以你也应该有这样的东西
$("option").click(function(){
$(this).parent().blur();
});
Also, if you're having issues with the absolute positioned select list showing behind other elements, just put a
此外，如果您对显示在其他元素后面的绝对定位选择列表有问题，只需放置一个
z-index: 100;
or something like that in the style of the select.
或类似的选择风格。
回答by Andreas Grech
It is not possible for javascript to "click" on an element (u can trigger the attached onclickevent, but you can't literally click it)
javascript 不可能“点击”一个元素（你可以触发附加的onclick事件，但你不能直接点击它）
To view all the items in the list, make the list a multiplelist and increase its size, like such:
要查看列表中的所有项目，请将列表设为multiple列表并增加其大小，如下所示：
<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>
回答by yckart
Super simple:
超级简单：
var state = false;
$("a").click(function () {
state = !state;
$("select").prop("size", state ? $("option").length : 1);
});
