jQueryフィルタリング

Question

jQueryを使用して複数行の選択ボックスをフィルタリングする方法はありますか？

私はjQueryを初めて使用しているため、これを実行する最善の方法を見つけられないようです。例えば

私が持っている場合：

<select size="10"> 
    <option>abc</option> 
    <option>acb</option> 
    <option>a</option> 
    <option>bca</option> 
    <option>bac</option> 
    <option>cab</option> 
    <option>cba</option> 
    ... 
</select> 

私はドロップダウンの選択に基づいて、このリストをフィルタする：このような

<select> 
    <option value="a">Filter by a</option> 
    <option value="b">Filter by b</option> 
    <option value="c">Filter by c</option> 
</select> 

Answer 1

何かがトリックを行う可能性があります（あなたを与えると仮定'Filter by ...'のIDを、フィルタを選択し、フィルタリングされた/他のIDはotherOptions）を選択します。

$(document).ready(function() { 
    $('#filter').change(function() { 
     var selectedFilter = $(this).val(); 
     $('#otherOptions option').show().each(function(i) { 
      var $currentOption = $(this); 
      if ($currentOption.val().indexOf(selectedFilter) !== 0) { 
       $currentOption.hide(); 
      } 
     }); 
    }); 
}); 

UPDATE：なし：@Brian梁はコメントで指摘したように、あなたが問題表示に<オプション>タグを設定している場合があります。したがって、次のようにすれば、より優れたクロスブラウザソリューションが得られるはずです。

$(document).ready(function() { 
    var allOptions = {}; 

    $('#otherOptions option').each(function(i) { 
     var $currentOption = $(this); 
     allOptions[$currentOption.val()] = $currentOption.text(); 
    }); 

    $('#filter').change(function() { 
     // Reset the filtered select before applying the filter again 
     setOptions('#otherOptions', allOptions); 
     var selectedFilter = $(this).val(); 
     var filteredOptions = {}; 

     $('#otherOptions option').each(function(i) { 
      var $currentOption = $(this); 

      if ($currentOption.val().indexOf(selectedFilter) === 0) { 
       filteredOptions[$currentOption.val()] = $currentOption.text(); 
      } 
     }); 

     setOptions('#otherOptions', filteredOptions); 
    }); 

    function setOptions(selectId, filteredOptions) { 
     var $select = $(selectId); 
     $select.html(''); 

     var options = new Array(); 
     for (var i in filteredOptions) { 
      options.push('<option value="'); 
      options.push(i); 
      options.push('">'); 
      options.push(filteredOptions[i]); 
      options.push('</option>'); 
     } 

     $select.html(options.join('')); 
    } 

});