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?

`hide()` does add the style `display:none;` to your element. But this style as no effect on options. http://stackoverflow.com/questions/19270386/displaynone-not-works-for-option — β.εηοιτ.βε, Jun 10 '15 at 17:02
Ahh--it is different for different browsers. Works fine in chrome and FF, but not in safari or IE — Ted, Jun 10 '15 at 17:04
@Ted yep can confirm it does not works at all in my safari v8.0.6 — β.εηοιτ.βε, Jun 10 '15 at 17:05
Not if you just want to hide. Removing is an option as @Ted pointed in his answer but will force you to recreate the dom element if you need to reshow it. — β.εηοιτ.βε, Jun 10 '15 at 17:09

score 6 · Accepted Answer · answered Jun 10 '15 at 17:05

6

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

answered Jun 10 '15 at 17:05

Ted

14,757
2
41
58

score 0 · Answer 2 · answered Jun 10 '15 at 16:59

0

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

answered Jun 10 '15 at 16:59

Vince

3,207
1
17
28

This is a browser compatibility issue -- see the link posted in the comments by @b.enoit.be : http://stackoverflow.com/questions/19270386/displaynone-not-works-for-option – Vince Jun 10 '15 at 17:04

jQuery - hide option element by value

2 Answers2

Linked