jQuery display none a option in a form

Question

I want to display none a option of a form.

HTML:

<option class="level-0" value="top-10-villen-de">Top-10-Villen</option>

jQuery:

if(jQuery('option').attr('value') == 'top-10-villen-de'){
    jQuery(this).css('display', 'none');
}

I've a issue in my if statement but I can't figure out where is my issue.

Can somebody helps me?

Thank you.

Why don't you just add the `display:none` to your class in CSS? — 099, Aug 25 '15 at 08:03
alternates http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css & http://stackoverflow.com/questions/14512357/how-to-hide-html-form-select-option — Arun P Johny, Aug 25 '15 at 08:07

score 1 · Accepted Answer · answered Aug 25 '15 at 08:24

1

Hiding the dropdown option isn't compatible with all browser.

I've got a better option. wrap the option into span and when you need it back unwrap it

Fiddle link : http://jsfiddle.net/xms2uydx/

answered Aug 25 '15 at 08:24

Silent_Coder

150
1
11

Thanks for the information about compatiblity with the browsers. You jsfiddle works fine. Have a nice day. – cgee Aug 25 '15 at 08:51
@cgee: dont seem to work for me. also wrapping option element in span results in invalid html. – Milind Anantwar Aug 25 '15 at 11:42

Keval Bhatt · Answer 2 · 2015-08-25T08:39:14.387

You are using wrong this see this example for THIS Scope

http://jsfiddle.net/kevalbhatt18/r2m2ucgv/2/

The above example is give you difference between two this. 1. which is out of Jquery. 2. which is inside jquery function.

so as you can see in example first console i.e console.log(this) will return window object.

2 . $(this) which is inside click function will give you different value it is related to your button it will gives you button scope

you can also use

jQuery('option').find('.level-0').css('display', 'none') if you know the class of option.

HTML

<button>option 1</button>
<button>option 2</button>
<select>
    <option class="level-0" value="top-10-villen-de">Top-10-Villen</option>
    <option class="level-1" value="top-1">Top-20</option>
</select>

Jquery

console.log(this)
$('button').click(function () {

    if ($(this).text() === "option 1") {
        if (jQuery('option').attr('value') == 'top-10-villen-de') {
            console.log('inside')
            console.log(jQuery('option[class="level-0"]'))
            jQuery('option[class="level-0"]').css('display', 'none');
        }

    } else {

        jQuery('option[class="level-0"]').toggle()
    }

})

Milind Anantwar · Answer 3 · 2015-08-25T08:13:49.467

0

That is because context this in if statement do not refer to option element.Correct way to achieve this would be to find element with attribute value equal to top-10-villen-de along with .hide():

jQuery('option[value="top-10-villen-de"]').hide();

FYI, the hiding of option elements do not work. a good workaround for this would be to disable the option by setting its disabled property to true.

edited Aug 25 '15 at 08:13

answered Aug 25 '15 at 08:02

Milind Anantwar

81,290
25
94
125

You very well know its not cross browser compatible as I have seen in your previous answer, then why did you not incorporated it. – Satpal Aug 25 '15 at 08:09
@Satpal: oh i remember. but people are hardly taking IE compatibility in consideration nowadays. ill still update the answer with alternative. – Milind Anantwar Aug 25 '15 at 08:11

score 0 · Answer 4 · answered Aug 25 '15 at 09:24

In jQuery , whenever you have more than one element in DOM , then to access all elements you have to use $('selector').each(function(index,Obj){}).

Use this code to hide the options you want

$('#temp').find('option').each(function(index,Obj){
if($(this).attr('value')=='2')
$(this).css('display', 'none');
})

Demo

Selvamani · Answer 5 · 2015-08-25T08:26:06.407

-2

You can set display none when it the value is top-10-villen-de

jQuery( "select" ).change(function() {
  if(jQuery(this).val() == 'top-10-villen-de'){
    jQuery(this).find("option[value='top-10-villen-de']").css('display', 'none');
  }
});

Here the fiddle

https://jsfiddle.net/jva8ju1s/

edited Aug 25 '15 at 08:26

answered Aug 25 '15 at 08:14

Selvamani

7,434
4
32
43

1

This would hide the whole `select`. – putvande Aug 25 '15 at 08:15

jQuery display none a option in a form

5 Answers5