trying to hide options from selectlist .. not working on chrome and ie

Question

I have a select lists, which has lots of option. Depending on some input I want to hide few options from select list. To hide options from select list I have written jquery like

$('#selectlist1 option').each(function(){  

   $(this).hide();

})

But this code seems to work only for firefox and its not working on chrome and ie. Whereas if I write

$('#selectlist1').hide();

it works for all browser. Any pointer where should I look at?

Answer 1

Here's a relatively concise way to rebuild the select list on demand with new options. This works for dynamically inserted options (which is what IE and Chrome have a problem with showing and hiding)

$().ready(function() {
    //store a reference
    var select = $('#myselect');
});

function rebuild_select(arr_new_options) {
    var parent = select.parent();
    select.empty();
    var clone = select.clone();
    select.remove();
    for(var x=0; x < arr_new_options.length; x++) {
        clone.append(arr_new_options[x]);
    }
    parent.append(clone);
    select = clone;
}