javascript - jqueryを使用して選択要素を開く方法

Question

次のような選択要素があります。ユーザーがクリックしなくても開きたい。

    <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を使用して可能かどうか教えてください

score 20 · Accepted Answer

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/

ソース: jquery @stackoverflow.comを使用して選択入力を開く方法

score 1 · Accepted Answer

ここで同様の質問を見つけることができます: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

すべてのブラウザーで機能する単一のソリューションはないと思います。

document.createEvent()and .dispatchEvent()(上記のリンクで説明されているように) を使用すると、WebKit ブラウザー (Safari、Chrome) ではうまく機能しますが、Firefox、Opera、および IE では機能しないことを確認できます。

ただし、そこにリストされているさまざまなソリューションを組み合わせてみることはできます。

score 0 · Accepted Answer

ここにこの問題の完全な解決策があります JS を使用して HTML 選択を開いてオプションリストを表示することは可能ですか? . このスキームでは、すべての機能を備え、ページレイアウトを維持しながら、選択を正しく簡単に開くことができます。このソリューションは安全でシンプルで、Internet Explorer、FireFox、および Chrome と互換性があります。

ありがとう！

score -3 · Accepted Answer

次のスクリプトを使用できます

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

score -3 · Accepted Answer

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

これはうまくいくはずです。

アップデート：

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

他の回答と非常に似ていますが、「クリック」するのではなく、「フォーカス」を試すことができます。

javascript - jqueryを使用して選択要素を開く方法

5 に答える 5

Related

Reference