I want a function to be executed if a specific select option is visible. I have tried the following code:

if ($(("#daychoise option[value='monday2']").is(':visible'))) {

}

That didn't work and I got the following error in the console:

Uncaught TypeError: Object #daychoise option[value='monday2'] has no method 'is'

So how do I check if a select option is visible?

Thanks in advance

I want a function to be executed if a specific select option is visible. I have tried the following code:

if ($(("#daychoise option[value='monday2']").is(':visible'))) {

}

That didn't work and I got the following error in the console:

Uncaught TypeError: Object #daychoise option[value='monday2'] has no method 'is'

So how do I check if a select option is visible?

Thanks in advance

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 29, 2013 at 7:41 HwendeHwende 64933 gold badges1111 silver badges2828 bronze badges 2

• You have extra (). Should be $("#daychoise option[value='monday2']").is(':visible'). However it's not going to work anyway. – dfsq Commented Nov 29, 2013 at 7:43
• could you please make a fiddle ? we don't know what exactly you lookin' for – Pejman Commented Nov 29, 2013 at 7:53

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 8

Wrong selector ! You should use this :

if ($("#daychoise option[value='monday2']").is(':visible')) {

}

You probably meant this

if (($("#daychoise option[value='monday2']").is(':visible'))) {

}

Note the location of the $

You can hav it like this

<select id="selectbox">
<option value="0">sunday</option>
<option value="1">monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<select>

and in jquery you can write as

      <script>
        $(document).ready(function(){
          if($("#selectbox").val() == 1){
            // do something
          }
        });
      </script>

If you want to check if a value is selected in a multiple selectbox

<select multiple>...</select>

you should do it this way:

if ($.inArray('monday2', $("#daychoise").val()) !== -1) {

}

Please Try:

$(("#daychoise option[value='monday2']").change(function(){
    if($(this).is(':visible')){
             //do what you want
    }
});

An option element always returns false when its status is tested with the :visible selector, as the element doesn't occupy space in the DOM. If you hide the option element with hide(), you can instead retrieve the CSS value for the display property:

$('#daychoise option[value="monday2"]').hide();

if($('#daychoise option[value="monday2"]').css('display') == 'none')
{
    alert('monday2 is hidden');
}
else
{
    alert('monday2 is visible');
}