Solved

how to get all drop down values

Posted on 2014-11-13
8
250 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
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
 
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

729 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