Hiding certain SELECT dropdown in JQuery

I have a page with approx 10 SELECT dropdowns. 3 of these dropdowns are hidden by default onload, depending on the users status.

Now, if a user does something specific, all these 7 dropdowns are hidden and depending on the users input, these dropdown are visible.

I show and hide these dropdowns using JQuery.

jQuery("select").hide() 
jQuery("select").show()

Currently, When the select dropdowns are shown, all the selects are visibile. I then have to run code to hide the 3 default ones.

What I would like is for JQuery to 开发者_运维问答hide the visible select dropdowns (the 7 visible ones) and then show these 7 ones (leaving the 3 defaulted hidden one hidden).

Is this possible using JQuery, so that it only shows and hides the select dropdowns where the style visibility is visible?Not too sure?

Many thanks

Solution is to assign these selects a special class and use their class to show and hide:

$(".mySpecialSelectClass").hide();

$(".mySpecialSelectClass").show();

You just need to make sure this class is only assigned to those selects.

give the default hidden ones a class, such as 'default_hidden' and do

jQuery("select").not(".default_hidden").toggle();

this will, ignoring the state of the default hidden ones, toggle the visibility of all the others, swapping their show/hide states..

Give the three select tags a different class than the other 7. Now when you want to toggle hide or show them you can do the selection using the class ("defaultHidden" in this example):

$("select.defaultHidden").show();

(as an example, your code will vary depending on your actual desired result.

There is a jQuery visible selector: http://api.jquery.com/visible-selector/

Try something like:

jQuery("select:visible") to get the visible ones.

jQuery("select:hidden") to get the hidden ones.