如何使用jQuery打开select元素

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

你可以简单地触发单击事件：

jQuery(document).ready(function($) { 
    $('#selId').click(); 
}); 

Answer 2

$(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 3

您将一个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 4

你可以找到一个类似的问题在这里：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 5

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

谢谢！

Answer 6

您可以使用下面的脚本

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