Trying to hide options from a select list. Doesn't work on chrome, etc.

Question

I have a favorites list that has many options. Depending on the input, I want to hide several options from the selection list. To hide the options from the select list, I wrote jquery as

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

   $(this).hide();

})

But this code only works for firefox and does not work on chrome, etc. If i write

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

It works for all browsers. Any pointer I should look at?

Answer 1

Here's a relatively short way to rebuild a select list on demand with new options. This works for dynamically inserted options (that IE and Chrome have a show and hide problem)

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

Answer 2

x-browser. - , .

question

Answer 3

For those who deal with hidden element elements in these affected versions, I have posted a workaround here that does not clone or delete parameters, but wraps around them, which may be much easier to deal with:

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/