Filtrage jQuery

Question

Existe-t-il un moyen de filtrer une zone de sélection multiligne en utilisant jQuery? Je suis une nouvelle personne à jQuery et n'arrive pas à trouver la meilleure façon de le faire.

Par exemple, si j'ai:

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

Je veux filtrer cette liste en fonction d'une sélection déroulant avec:

<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

Quelque chose comme cela pourrait faire l'affaire (en supposant que vous donnez à votre 'Filtrer par ...' sélectionnez un ID de filtrez et le filtre/autre sélectionnez un ID de 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(); 
      } 
     }); 
    }); 
}); 

MISE À JOUR: Comme Liang a souligné @ Brian dans les commentaires, vous pourriez avoir des problèmes de réglage l'option < > balises à display: none. Par conséquent ce qui suit devrait vous donner une meilleure solution multi-navigateur:

$(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('')); 
    } 

});