0

In Chrome these do not behave as expected, the style options doesn't work if a size attribute is used. How can I make this work?

<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/

My end game here is to have a search box that filters a select list of some kind.

4

1 に答える 1

0

結局、非表示の選択リストを使用し、2つの間で要素を移動しました。誰かがこれを見つけてこれを改善できるなら、そうしてください、私はあなたを答えとしてマークします。私は多かれ少なかれ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>
于 2013-03-10T20:38:34.920 に答える