对于 HTML 中的这个下拉列表：
<select id="countries">
<option value="1">Country</option>
</select>
我想打开列表（与左键单击相同）。这可以使用 JavaScript（或更具体地说是 jQuery）吗？
【问题讨论】：
标签： jquery html drop-down-menu
我试图找到同样的东西但很失望。 我最终更改了选择框的属性大小，因此它似乎打开了
$('#countries').attr('size',6);
然后当你完成时
$('#countries').attr('size',1);
【讨论】：
size 属性添加到下拉列表实际上会将下拉列表转换为列表框..因此它会扩展..
您可以轻松simulate a click on an element，但点击<select> 不会打开下拉菜单。
使用多项选择可能会出现问题。也许您应该考虑容器元素内的单选按钮，您可以根据需要展开和收缩。
【讨论】：
我遇到了同样的问题，我有一个解决方案。一个名为 ExpandSelect() 的函数模拟鼠标单击“选择”元素，它通过创建另一个绝对定位的 <select> 元素来实现这一点，并且通过设置 size 属性可以同时显示多个选项。在所有主流浏览器中测试：Chrome、Opera、Firefox、Internet Explorer。解释它是如何工作的，以及这里的代码：
编辑（链接已损坏）。
我在 Google Code 创建了一个项目，去那里找代码：
http://code.google.com/p/expandselect/
在模拟点击的时候，GUI有一点区别，不过没关系，自己看吧：
鼠标点击时：
（来源：googlecode.com）
模拟点击时：
（来源：googlecode.com）
项目网站上的更多屏幕截图，上面的链接。
【讨论】：
这应该涵盖它：
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
这可以绑定到例如按键事件，因此当元素具有焦点时，用户可以键入并且它会自动展开...
--上下文--
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);
});
【讨论】：
$('#select_element').get(0).dispatchEvent(event);
这是从上面的答案中整理出来的，并使用选项的长度/数量来符合实际有多少选项。
希望这可以帮助某人获得他们需要的结果！
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();
}
【讨论】：
简单易行。
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
}
现在你可以像这样调用你的 DropDown
<select onfocus="down(this)" onblur="up(this)">
非常适合我。
也许更好，因为您对页面上其他元素的位置没有任何问题。
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");
}
将 ID 更改为固定值我可能不聪明，但我希望你能看到这个想法。
【讨论】：
javascript 不可能“点击”一个元素（你可以触发附加的onclick 事件，但你不能直接点击它）
要查看列表中的所有项目，请将列表设为multiple 列表并增加其大小，如下所示：
<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>
【讨论】：
不，你不能。
您可以更改尺寸以使其更大...类似于Dreas的想法，但它是您需要更改的尺寸。
<select id="countries" size="6">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
<option value="4">Country 4</option>
<option value="5">Country 5</option>
<option value="6">Country 6</option>
</select>
【讨论】：
我尝试使用 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();
}
【讨论】：
这没有回答的一件事是，当您在完成 size = n 并使其成为绝对定位后单击选择列表中的选项之一时会发生什么。
因为 blur 事件使其 size = 1 并将其改回原来的样子，所以您也应该有这样的东西
$("option").click(function(){
$(this).parent().blur();
});
另外，如果您对显示在其他元素后面的绝对定位选择列表有疑问，只需放置一个
z-index: 100;
或类似的选择风格。
【讨论】：
超级简单：
var state = false;
$("a").click(function () {
state = !state;
$("select").prop("size", state ? $("option").length : 1);
});
【讨论】：
<select> 上使用 scrollIntoView 可以轻松修复滚动跳转。
如前所述，您无法使用 JavaScript 以编程方式打开 <select>。
但是，您可以编写自己的 <select> 来管理整个外观和感觉。类似于您在 Google 或 Yahoo! 上的自动完成搜索词或 The Weather Network 上的搜索位置框看到的内容。
我为 jQuery here 找到了一个。我不知道它是否会满足您的需求，但即使它不能完全满足您的需求，也应该可以对其进行修改，以便在其他操作或事件的情况下打开它。 This one 实际上看起来更有前途。
【讨论】：
我刚刚添加了
select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();
并添加到选择中
onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"
使外观与经典外观相同 （与 html 的其余部分重叠）
【讨论】：
也许晚了，但这就是我解决它的方法： http://jsfiddle.net/KqsK2/18/
$(document).ready(function() {
fixSelect(document.getElementsByTagName("select"));
});
function fixSelect(selectList)
{
for (var i = 0; i != selectList.length; i++)
{
setActions(selectList[i]);
}
}
function setActions(select)
{
$(select).click(function() {
if (select.getElementsByTagName("option").length == 1)
{
active(select);
}
});
$(select).focus(function() {
active(select);
});
$(select).blur(function() {
inaktiv(select);
});
$(select).keypress(function(e) {
if (e.which == 13) {
inaktiv(select);
}
});
var optionList = select.getElementsByTagName("option");
for (var i = 0; i != optionList.length; i++)
{
setActionOnOption(optionList[i], select);
}
}
function setActionOnOption(option, select)
{
$(option).click(function() {
inaktiv(select);
});
}
function active(select)
{
var temp = $('<select/>');
$('<option />', {value: 1,text:$(select).find(':selected').text()}).appendTo(temp);
$(temp).insertBefore($(select));
$(select).attr('size', select.getElementsByTagName('option').length);
$(select).css('position', 'absolute');
$(select).css('margin-top', '-6px');
$(select).css({boxShadow: '2px 3px 4px #888888'});
}
function inaktiv(select)
{
if($(select).parent().children('select').length!=1)
{
select.parentNode.removeChild($(select).parent().children('select').get(0));
}
$(select).attr('size', 1);
$(select).css('position', 'static');
$(select).css({boxShadow: ''});
$(select).css('margin-top', '0px');
}
【讨论】：