How to hide an option value

Question

I have tried everything i know to remove some of these option values

here is the html - I want to remove every option that has a value with MESSAGE in it

<select id="source_list" name="HOME_MODULES_AVAILABLE" size="16">
 <option value="TWITTER_FEED=N"></option>
 <option value="MFLTIP=N"></option>
 <option value="WHO_SHOULD_I_START=N"></option>
 <option value="LEAGUE_MAP=W"></option>
 <option value="MESSAGE=W"></option>
 <option value="MESSAGE2=W"></option>
 <option value="MESSAGE3=W"></option>
 <option value="MESSAGE4=W"></option>

I have tried all of these and no luck

$('#source_list:contains("MESSAGE")').hide();
$("option:contains('MESSAGE')").hide();
$("#source_list option[value="MESSAGE"]").hide();
$("select > option[value*='MESSAGE']").remove();
$("select > option[value$='MESSAGE']").remove();
$("#source_list > option[value*='MESSAGE']").remove();

any advice ?

Your last line seems to work for me and removes last 4 options. [JSFiddle](http://jsfiddle.net/5y5z94f9/). — izstas, Aug 12 '14 at 22:03
izstas , your correct !! i had a syntax error on my trial page when i tried that one ;) Thanks — MShack, Aug 12 '14 at 22:04
like `$("#source_list > option").filter(function( i , v ){ return /MESSAGE/.test( v.value );})` — rab, Aug 13 '14 at 05:38
@MShack: Please check the answer i ve provided, and select the answer which works well for u, so that the question does not go unanswered. — Pbk1303, Sep 10 '14 at 22:42

score 0 · Answer 1 · answered Aug 12 '14 at 22:08

0

Try this:

$('#source_list option').each(function(i, e) {
    if($(e).attr('value').match(/^MESSAGE/)) $(e).remove();
});

It iterates through every option node and checks with a regular expression, whether value starts with "MESSAGE".

It is by the way better to remove the options instead of trying to hide them, due to better cross browser support.

answered Aug 12 '14 at 22:08

Lionel

1,949
3
17
27

"When should I vote down? Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect." What of this is the reason for your downvote(s)? – Lionel Aug 15 '14 at 07:59

score 0 · Answer 2 · answered Sep 10 '14 at 22:40

There are two ways to do this

1) starts with selector ^ - it checks for all options value starting with the word MESSAGE.

$("#source_list > option[value^='MESSAGE']").remove();

DEMO

2) contains selector * - it checks for all options value containing the word MESSAGE.

$("#source_list > option[value*='MESSAGE']").remove();

DEMO

score -1 · Answer 3 · answered Aug 12 '14 at 22:07

Try using CSS:

option[value="MESSAGE"] {
    display:none;
}

If you want it to be toggle-able add the following class to the option tags you want to be able to hide and show.

.hidden {
    display:none;
}

then use .addClass and .removeClass via jQuery.

score -2 · Answer 4 · edited Aug 13 '14 at 06:33

-2

$("#selectboxid option[value='1']").remove();

edited Aug 13 '14 at 06:33

frogatto

28,539
11
83
129

answered Aug 13 '14 at 05:29

CSK

777
7
17

it won't selected options with value `MESSAGE` in it . – rab Aug 13 '14 at 05:42
which option you have to remove and that option value has to be place with in option – CSK Aug 13 '14 at 06:00

How to hide an option value

4 Answers4