jQuery - hide option element by value

Question

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*="boxes"] option[value="box6"]').hide();

here the fiddle: http://jsfiddle.net/q2nb08t6/

any suggestions?

Answer 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

Answer 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();