我可以使用jQuery打开一个下拉列表吗？
对于HTML中的这个下拉列表：
<select id="countries"> <option value="1">Country</option> </select> 我想打开列表（与左键单击相同）。 这是可能的使用JavaScript（或更具体的jQuery）？
你可以很容易地模拟一个元素的点击，但是点击<select>不会打开下拉菜单。
使用多个选择可能会有问题。 也许你应该考虑一个容器元素内的单选按钮，你可以根据需要扩展和缩小。
我试图找到同样的东西，感到失望。 我结束了改变选择框的属性大小，所以它似乎打开
$('#countries').attr('size',6);
然后当你完成
$('#countries').attr('size',1);
我遇到了同样的问题，我有一个解决方案。 一个名为ExpandSelect（）的函数模拟鼠标点击“select”元素，通过创建一个绝对正确的另一个<select>元素并通过设置size属性同时显示多个选项。 在所有主流浏览器上测试：Chrome，Opera，Firefox，Internet Explorer。 它的工作原理以及代码如下：
编辑（链接被打破） 。
我在Google Code中创建了一个项目，在那里找到代码：
http://code.google.com/p/expandselect/
截图
在模拟点击时，GUI有一点区别，但这并不重要，请亲自看看：
当鼠标点击时：
MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg
仿真时点击：
Emulating点击http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg
项目网站上的更多截图，上面的链接。
这应该包括它：
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
这可能会被绑定到一个按键事件，所以当元素具有焦点时，用户可以输入并自动扩展…
–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); });
这是从上面的答案，并使用长度/数量的选项，以符合实际有多少选项。
希望这有助于有人得到他们需要的结果！
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)">
为我完美的作品。
也许更好，因为你在页面上的其他elemts的位置没有问题。
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为固定值mybe不智能，但我希望你看到idee。
不，你不能。
你可以改变尺寸，使其更大…类似于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>
javascript不可能“点击”一个元素（你可以触发附加的onclick事件，但是你不能从字面上点击它）
要查看列表中的所有项目，请使列表成为multiple列表并增加其大小，如下所示：
<select id="countries" multiple="multiple" size="10"> <option value="1">Country</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之后，当你点击选择列表中的一个选项，并使之成为绝对定位时会发生什么。
因为模糊事件使其大小= 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); });
如前所述，您无法以编程方式使用JavaScript打开<select> 。
但是，您可以编写自己的<select>管理整个外观，并感受自己。 类似于您在Google或Yahoo!上自动填充搜索字词的内容 或在天气网络上搜索位置框。
我在这里找到了一个jQuery。 我不知道它是否能够满足你的需求，但即使它不能完全满足你的需求，也应该可以修改它，使其可以作为其他行动或事件的结果。 这一个看起来更有希望。
也许晚了，但这是我如何解决它： 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'); }
我刚刚添加
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的其余部分）
;){kind=link}
;){kind=link}