Chrome選擇列表樣式行爲過濾選擇列表選項

Question

在Chrome中，這些行爲不像預期的那樣，如果使用size屬性，則樣式選項不起作用。我該如何做這項工作？

<select size=2> 
    <option>1</option> 
    <option selected>2</option> 
    <option style="display: none;">3</option> 
    <option>4</option> 
</select> 
<br/> 
<select> 
    <option>1</option> 
    <option selected>2</option> 
    <option style="display: none;">3</option> 
    <option>4</option> 
</select> 

http://jsfiddle.net/D9X9U/1/

我的比賽結束這裏是有一個過濾器的一些類型的選擇列表中的搜索框。

Answer 1

我結束了使用隱藏的選擇列表和移動元素之間的兩個。如果有人發現這一點，並可以改善這一點，請這樣做，我會將你的標記作爲答案。我或多或少地通過javascript和jquery摸索我的方式，所以我相信可以做很多事情來改善這一點。

http://jsfiddle.net/x6cfF/1/

編輯：任何人誰發現這個尋找解決的辦法，這裏有一個更好的https://codereview.stackexchange.com/questions/23706/better-way-to-filter-select-list/23710?noredirect=1#23710

<input type="search" id="SearchBox" /> 
<br /> 
<div class="scrollable" id="CustomerSelectDiv"> 
    <select size=2 class="scrollableinside" id="CustomerSelect"> 
     <option value=100>test</option> 
     <option value=101>test1</option> 
     <option value=102>test2</option> 
     <option value=103>test3</option> 
    </select> 
</div> 
<div style="display: none;"> 
    <select id="CustomerSelectHidden"></select> 
</div> 




<script type="text/javascript"> 
    window.onload=function() { 

      var $options = $('#CustomerSelect option'); 
      document.getElementById("SearchBox").onkeyup = function() { 
       var $HiddenOptions = $('#CustomerSelectHidden option'); 
       $HiddenOptions.each(function (index, value) { 
        document.getElementById('CustomerSelect').appendChild(this); 
       }); 
       var search = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
       var element = $options.filter(function() { 
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
        return !~text.indexOf(search); 

       }).appendTo(document.getElementById('CustomerSelectHidden')); 
      } 
     } 
</script>