Question

131

Check if select is displaying options

rated 0 times [ 134] [ 3] / answers: 1 / hits: 38758 / 9 Years ago, tue, june 9, 2015, 12:00:00

I have the following HTML code:

<select>

<option selected>Test 1</option>

<option>Test 2</option>

<option>Test 3</option>

</select>

How do I check if the <option>s of the <select> are displayed? For example, this is considered as the <option>s of the <select> are displayed:

Options

And this is considered that the <option>s of the <select> are not displayed:

Options

I have tried this:

$(#myselect).on(click, function() {

    if ($(#myselect option).length == 0) {

        console.log(not displayed);

    } else {

        console.log(displayed);

    } 

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<select id=myselect>

<option selected>Test 1</option>

<option>Test 2</option>

<option>Test 3</option>

</select>

But the console logs displayed all the time.

So how can I achieve this?

EDIT 1:

The answers at How to check if an select element is still “open” / active with jquery does not work because when I click the select element to display the options then click it again, the options are not displayed even though the select is still focused.

EDIT 2:

Just in case I wasn't explicit enough, basically I want the console to log displayed or not displayed the user clicks on the select or the options

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aubriea

Add To Favorites

Follow

Total Points: 641

Total Questions: 118

Total Answers: 101

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

answered 9 Years ago katharinek · Accepted Answer

You can try listening on click, blur and key press event. I am just toggling a open variable to true or false on each of the event.

   // if menu is open then true, if closed then false

   // we start with false

   var open = false;

   // just a function to print out message

   function isOpen(){

       if(open)

          return menu is open;

       else

          return menu is closed;

   }

   // on each click toggle the open variable

   $(#myselect).on(click, function() {

         open = !open;

         console.log(isOpen());

   });

   // on each blur toggle the open variable

   // fire only if menu is already in open state

   $(#myselect).on(blur, function() {

         if(open){

            open = !open;

            console.log(isOpen());

         }

   });

   // on ESC key toggle the open variable only if menu is in open state

   $(document).keyup(function(e) {

       if (e.keyCode == 27) { 

         if(open){

            open = !open;

            console.log(isOpen());

         }

       }

   });

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<select id=myselect>

<option selected>Test 1</option>

<option>Test 2</option>

<option>Test 3</option>

</select>