Solved

how to get all drop down values

Posted on 2014-11-13
8
245 Views
Last Modified: 2014-11-18
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

0
Comment
  • 4
  • 3
8 Comments
 
LVL 8

Expert Comment

by:vr6r
ID: 40441953
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/
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40442000
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
0
 
LVL 8

Expert Comment

by:vr6r
ID: 40442061
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.
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40442068
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
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 8

Accepted Solution

by:
vr6r earned 500 total points
ID: 40442104
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/
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40444011
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

0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40446633
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

0
 
LVL 8

Expert Comment

by:vr6r
ID: 40446753
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.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now