Michael Price schrieb:
Hi all,
I've got two select boxes side by side - initially the right hand side
box has ALL options in it - and the left hand box can be used to
filter the options displayed.
Probably not the best way to do it (in fact, defintiely - it doesn't
work in IE) but the left hand list has options whose values correspond
to class names of the options in the right hand list. When an option
in the left hand list is selected, all options in the right hand one
which DON'T have this class are hidden, and all which DO are
displayed. Using $("option ." + className).show() and .hide() works in
Firefox but not in IE.
Is there a better approach to this?
perhaps ypou should use the remove()-method instead of hiding them. when
you do this you should be storing all possible options of the right
selectlist prior to removing as otherwise you won't be able to fill the
list again if the the selected option on the left changes...
something like this:
var $possibleOptsRight;
$( document ).ready(function() {
$possibleOptsRight = $('#rightselectlist option');
$( '#leftselectlist' ).bind('change', function() {
$('#rightselectlist')
.children().remove().end()
.append( $possibleOptsRight ).children()
.not('.' + $(this).val() ).hide();
});
});
surely untested ;-)
