如何使用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>