Hide select option in IE using jQuery

Question

Currently I am using jQuery to hide/show select options using following code.

$("#custcol7 option[value=" + sizeValue + "]").hide();

This works fine in Firefox, but doesnt do any good in other browsers. How to I hide options from select in Chrome, Opera and IE?

Answer 1

You can use through combinations of var $opt=$('select>option').clone() and $('select option[value="'+val+'"').remove(). There is another example: try this. https://jsfiddle.net/sherali/jkw8fxzf/12/

var $secondOption= $('#second-choice>option').clone();

$("#first-choice").change(function() {
    var userSelected = $(this).val();

    $('#second-choice').html($secondOption);
    $('#second-choice option[value="'+userSelected+'"').remove()
});

Answer 2

Just deleted it and store it in a var in your JavaScript. You can just create the new object when you need it later.

Otherwise try the disabled attribute mentioned above.

Answer 3

My take is bit different to other answers.

The aim is not to hide the options but just make them disable(to keep the UI consistent).

My Scenario :

I have multiple selects in a form and when an user selects an option in one of the selects the other selects should disable this option and vice versa. User is restricted from selecting the same option which is already selected. We normally disable the option but for IE 7 which does not support it. User also gets an option to add new selects.

Solution :

On load :

If the browser is IE7 then while populating the the selects and disabling the already selected options on other selects I am adding a custom attribute to the option("data-ie7-disabled") and also changing the color of the disabled options to '#cccccc'(which is the standard color for disabled options). This makes the UI look same across browsers.

On Change :

I save the previous option in a local variable(this is saved on focus).

When a user tries to change an option

1. User selects a complete new option which is not selected in any other dropdown. Then I loop through other selects and change the color and add custom attribute to this selected option on other selects.

2. When user selects an option that is already selected(The option which has grayed out color). I check if the option has this custom attribute on it first. If it has then > I simply revert the option to the previous one with an error message saying "This option is already selected or BLAH BLAH".

3. When user changes his existing option to a brand new option which is not selected in any other dropdown's. I again loop through all the other select options and remove the color on it and also the custom attribute.

Hope this helps.

Answer 4

You can use this:

$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});

It works fine on all browsers except Safari and Opera. I'm searching for another best solution :)

Answer 5

There's also the the .load method:

s_parent.change(function(){
   s_child.load('./fetch_options.php",{'v',s_parent.val()});
}

The 'fetch_options.php' script would simply print the option tags based on whatever data source you use and the parent value(s) being passed in.