how to get all drop down values

Hi ,

I have  n number of drop down in my JSp .   n   value will depends upon the user need (requirement).


i want to get all the drop down values. how to get that ?
div id="headNo1">
<select name="headNo1" id="headNo1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="headNo2">
<select name="headNo2" id="headNo2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="headNo3">
<select name="headNo3" id="headNo3">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>

...........

<div id="headNon">
<select name="headNon" id="headNon">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>

Open in new window

LVL 20
Sathish David  Kumar NArchitectAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

vr6rCommented:
This will loop through any dropdown elements found and perform the code within the function on them.  Access the dropdown value within the fuction using $(el).val()

$('select').each(function(ix,el){
	//add code here.
	//dropdown val = $(el).val()
});

Open in new window


Working example: http://jsfiddle.net/vp20abhh/
Sathish David Kumar NArchitectAuthor Commented:
Thanks vr6r ....

may i know what is ix and el

is el means element ?

but if i want to take value with id because ...

some other drop down(element id will differ eg: counId like that ) also there
vr6rCommented:
Yes in that example, el is the element referenced in the current loop iteration.  Likewise, ix is the index number of that element within the collection of elements returned by the selection, which in this case is all "select" dropdown elements.

Are you asking how you would get the element id, along with the value?
If so, you would do something like this...

$('select').each(function(ix,el){
	alert($(el).attr('id') + ": " + $(el).val());
});

Open in new window


Hope this helps.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Sathish David Kumar NArchitectAuthor Commented:
no no...
div id="headNo1">
<select name="headNo1" id="headNo1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="headNo2">
<select name="headNo2" id="headNo2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="xxxx">
<select name="xxxxx" id="xxxx">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>

...........

<div id="headNon">
<select name="headNon" id="headNon">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>

Open in new window


you can check the above code there is 2 diffrent Id there

one is headno(1,2,3...n)
other  one xxxx

i want only headno values no other drop down values
vr6rCommented:
Oh ok I see.
In that case I would suggest using a class name to differentiate between dropdowns you want and those that you don't.  Then you could just include that class name in the jquery selector.

So your dropdowns that you want to loop through would be defined like this... note the addition of the class "headNo":
<select class="headNo" name="headNo1" id="headNo1">
...
</select>
<select class="headNo" name="headNo2" id="headNo2">
...
</select>

Open in new window


Then include the class name in the jquery selection like this:
$('select.headNo').each(function(ix, el)){ 
    .... 
});

Open in new window


Here is an updated jsfiddle example:  http://jsfiddle.net/vp20abhh/1/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/31fbvfbo/

$("select[id^=headNo] option").each(function() {
      // checking, we alert value and text of option all select with ID like headNo(1,2,...)
      alert( $(this).val() + " / " + $(this).text() );
});

Open in new window

Sathish David Kumar NArchitectAuthor Commented:
vr6r its not working in my code ....

leakim971 i think your getting my question wrongly ...
i want the selected values of all drop down

i changed your code like this but not working can you help me
 
$("select[id^=headNo] selected ").each(function() {
      // checking, we alert value and text of option all select with ID like headNo(1,2,...)
      alert( $(this).val() + " / " + $(this).text() );
});

Open in new window

vr6rCommented:
Are you getting an error message at all?  The jsfiddle link I included in my example will show you a working version of the code so you can see that it definitely works but it will be hard to tell what the problem is without more info.

If you can post the code you are using so we can take a look I suspect we'll be able to spot the issue pretty quickly.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.