JQuery find which one is visible

Question

<select id="milesAway"> <option id="5" value="5">5 miles</option> <option id="10" value="10">10 miles</option> <option id="25" value="25">25 miles</option> <option id="50 value="50">50 miles</option> <option id="100" value="100">100 miles</option> <option id="250" value="250">250 miles</option> <option id="500" value="500">500 miles</option> </select> <input type="text" id="zipCode" /> <input type="text" id="cityState" class="cityState" /> 

So, at any given time, only one of these 3 available inputs will be shown. All are managed using .show() and .hide()

I use jQuery to find out which one is shown and get it.

Thanks!

Answer 1

You can do

 $(':input:visible') //This will selects all inputs on the page. You can narrow this down by specifying an ID that wraps the input you are looking or. 

You can also check if the entrance is visible by doing

 $('#cityState').is(':visible') 

Answer 2

http://jsfiddle.net/RSGrW/1/

First update after reading comments:

 var id = $("#milesAway:visible option:selected, #zipCode:visible, #cityState:visible").attr('id'); 

Since I saw that you entered the identifiers inside the option, I decided that you want this to return. This is an alternative only to enter or select an identifier.

 var id = $("#milesAway:visible, #zipCode:visible, #cityState:visible").attr('id'); 

Answer 3

$('option:visible');

will correspond to all optional elements that are not hidden, hidden, I mean the display: no, I do not think visibility: hidden calculations! you will have to double check this in the jQuery documentation under "Selectors"

Answer 4

Here ya go:

 $('select:not(:visible)'); 

I would suggest adding a class to each of the elements so that they are easy to select:

 $('.toggleInputs:not(:visible)');