JQuery - Hide Option Element By Value

Trying to hide an option element from a list. I have tried several methods however, cannot seems to work. I need to call select by name as I cannot add ID or class. $('select[name*

Solution 1:

If you can go with removing it, this seems to work in all browsers:

$('select[name*="boxes"] option[value="box6"]').remove();

Tested in FF, Chrome, Safari, IE and Opera.

Demo Fiddle

Solution 2:

Change your selector to

$('select[name*="boxes"] > option[value="box6"]').hide();

The > means to search the preceding selector for the following selector.

Here's your updated fiddle: http://jsfiddle.net/q2nb08t6/2/

Also, if this is a one-off situation, you could simplify your selector even further to:

$('option[value="box6"]').hide();