JQuery filtering

Question

Is there a way to filter a multiple row select box using jQuery?

I'm new to jQuery and can't figure out how best to do this.

For example, if I have:

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

I want to filter this list based on selection with:

 <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

Something like this might do the trick (if you give your "Filter by ...", select the filter identifier, and filter / other select the otherOptions identifier):

 $(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: As @Brian Liang noted in the comments, you may have problems setting <option> tags to display: none . Therefore, the following should give you the best cross-browser solution:

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