Solved

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

Posted on 2012-03-26
4
338 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
  • 2
4 Comments
 
LVL 5

Expert Comment

by:Ronak Patel
Comment Utility
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
Comment Utility
Here is your solution:

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

Expert Comment

by:Mrunal
Comment Utility
For javascript version:

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

Accepted Solution

by:
nap0leon earned 500 total points
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

743 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

19 Experts available now in Live!

Get 1:1 Help Now