JQuery: Hide Problem with MSIE, Safari, Chrome

Question

Hi,

    $(function() { 
   $('#IBE1_IBE_NurFlug1_ddl_Abflughafen > option[value*="TR"]').attr("style", "display: none;");

does not hide options in a select. Also .hide does not work. What's wrong here? In Firefox it's ok.

Thx a lot

Answer 1

Firefox for some reason is the only browser I've used that let's you modify <option> elements via CSS.

In truth, you cannot hide <option> elements - they must be removed from the <select>'s options[] array.

Edit:

Example:

(function () {
    var select = $('#IBE1_IBE_NurFlug1_ddl_Abflughafen');
    var diff = 0;
    console.dir(select[0].options);
    select.find('option').each(function(x) {
        if ($(this).is('[value*="TR"]')) {
            select[0].options[x+diff] = null;
            diff -= 1;
        }
    });
}());​

You can see the example live here.

The idea is to pull ALL <option> children from the <select>. This is necessary for proper indexing (so we remove the right thing).

We then iterate through the <option>s and run your selector against them. If it matches, we remove that option based on the index passed by each.

The diff is counting the removals so we do not remove the wrong <option> as the options[] array decreases in size from previous deletions.

Answer 2

Assuming you are happy to remove the option and do not require it later then this would be simpler...

$('#IBE1_IBE_NurFlug1_ddl_Abflughafen option[value*="TR"]').remove();