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

を「フォーカス」を試すことができます「をクリックし、」あなたはopenSelect()にCSSセレクタを通過し、 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 can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

：stackoverflow.com

Answer 4

@How to open the select input using jqueryあなたがここに同様の質問を見つけることができますそれはすべてのブラウザで動作します。

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>