Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need to alert the value of a <select> onchange, how do I do it?

Posted on 2012-03-26
4
Medium Priority
?
346 Views
Last Modified: 2012-06-28
Hello,

When the user selects a car in the second drop down menu, I would like the value of the two select boxes to alert.  How do I do that?  below is the code?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function printNames(a) {
alert(a)

};
</script>

</head>

<body>
<select name="car1" id="car1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select name="car2"  onchange="printNames(this.options[this.selectedIndex].value, document.getElementById('car1').options[this.selectedIndex].value">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</body>
</html>

Open in new window

0
Comment
Question by:NewWebDesigner
[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
  • 2
4 Comments
 
LVL 5

Expert Comment

by:Ronak Patel
ID: 37764839
try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function printNames(objSelect2, objSelect1) 
{
	var car1 = objSelect1.value;
	var car2 = objSelect2.value;

	alert("Car 1: " + car1 + "\n\nCar 2: " + car2);

}
</script>

</head>

<body>
<select name="car1" id="car1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select name="car2" id="car2" onchange="printNames(this, document.getElementById('car1'));">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</body>
</html>

Open in new window

0
 
LVL 22

Expert Comment

by:Mrunal
ID: 37765162
Here is your solution:

http://jsfiddle.net/ECzsg/
0
 
LVL 22

Expert Comment

by:Mrunal
ID: 37765198
For javascript version:

http://jsfiddle.net/ECzsg/1/
0
 
LVL 18

Accepted Solution

by:
nap0leon earned 2000 total points
ID: 37765953
I'd amend mroonal's code with an option for you in case you want the text that the user selected rather than the value of the drop-down. (e.g., you want "Audi" instead of "audi"), use the second alert in the printNames function.

<script type="text/javascript">
function printNames()  
{       
    var car1 = document.getElementById('car1');
    var car2 =document.getElementById('car2');
    alert("Car 1: " + car1.value+ "\n\nCar 2: " + car2.value);
    alert("Car 1: " + car1.options[car1.selectedIndex].text+ "\n\nCar 2: " + car2.options[car2.selectedIndex].text);
}
    </script>
</head>
<body>
<select name="car1n" id="car1" onchange='printNames();'>   
    <option value="volvo">Volvo</option>   
    <option value="saab">Saab</option>   
    <option value="mercedes">Mercedes</option>   
    <option value="audi">Audi</option>
</select>  
<select name="car2n" id="car2" onchange="printNames();">   
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>   
    <option value="mercedes">Mercedes</option>   
    <option value="audi">Audi</option>
</select>
</body>

Open in new window

0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

721 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