Question

我有一个select元素如下。我想打开它而无需用户点击它。

    <select id="selId" class="pos_fixed">
       <option value="volvo">Option1</option>
       <option value="saab">Option2</option>
       <option value="mercedes">Option3</option>
       <option value="audi">Option4</option>
    </select>

如果可能使用jquery或javascript

，请告诉我

Answer 1

您将CSS选择器传递给openSelect()，它将为您打开select元素。

var openSelect = function(selector){
     var element = $(selector)[0], worked = false;
    if (document.createEvent) { // all browsers
        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);
    } else if (element.fireEvent) { // ie
        worked = element.fireEvent("onmousedown");
    }
    if (!worked) { // unknown browser / error
        alert("It didn't worked in your browser.");
    }   
}

$(function(){ // when DOM is ready
   // open .select element
   openSelect('.select'); 
});

这是一个小提琴：http://jsfiddle.net/Z48wF/1/

资料来源：How to open the select input using jquery @ stackoverflow.com

Answer 2

您可以在此处找到类似的问题：How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

我认为没有一种解决方案适用于所有浏览器。

我可以确认使用document.createEvent()和.dispatchEvent()（如上面的链接所述）在WebKit浏览器（Safari，Chrome）中运行良好，但在Firefox，Opera和IE中运行效果不佳。

但是，您可以尝试合并其中列出的不同解决方案。

Answer 3

我在这里Is it possible to use JS to open an HTML select to show its option list?有一个完整的解决方案。在此方案中，可以正确，轻松地打开选择，具有其所有功能并保留页面布局。该解决方案安全，简单，并与Internet Explorer，FireFox和Chrome兼容。

感谢的！

Answer 4

$(document).ready(function(){  
  $('#selId').on('click',function(){
     //do stuff here
  });
  $('#selId').trigger('click');
});

这应该有用。

更新：

$(document).ready(function(){  
  $('#selId').click(function(){
     //do stuff here
  });
  $('#selId').click();
});

非常类似于其他答案，但是应该这样做，而不是“点击”你可以尝试“焦点”

Answer 5

您可以使用以下脚本

<script>
    function(){
        selectbox = $(select-selector)[0]
        selectbox.size = selectbox.options.length;
    }
</script>

如何使用jquery打开select元素

5 个答案: