展开选择下拉列表

我试图在点击链接时扩展选择下拉列表。

Click Me!  item 1 item 2 item 3 item 4  

Javescript如下。

 $(document).ready(function() { $("#btn").click(function() { $("#sel").trigger('click'); }); }); 

有任何想法吗…？？

Answer 1

您无法使用.trigger模仿本机浏览器事件。 看看这个 jQuery教程的链接 ，你似乎需要来自jquery.simulate.js的 .simulate方法。 此外，下拉框的打开事件由mousedown而非click给出。

更新：所以代码变成：

 $(document).ready(function() { $("#btn").click(function() { $("#sel").simulate('mousedown'); }); }); 

Answer 2

 //https://stackoverflow.com/a/10844589/7926961 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(); } 

DEMO：

http://jsfiddle.net/XE73h/444/

Answer 3

我认为找到解决这个问题我已经测试过，即FF，Chrome和Edge。

HTML

  one two free four five six seven height nine ten eleven twelve thirdteen   

JQUERY

 $('#MyButton').on("click",function(){ $("#selecttest").attr("size", 8); $("#selecttest").css("position","fixed"); $('#MyButton').css("margin-left", $("#selecttest").width() + 5);}); $('#selecttest').on("change",function(){ $("#selecttest").attr("size", 1);}); 

jsfiddle测试这个

Answer 4

试试这个

 $(document).ready(function() { $("#btn").click(function() { document.getElementById('sel').size='2' }); });