Monitor Multiple Selects for Change but not default value, Using JavaScript?

894359
894359 used Ask the Experts™
on
How do I monitor multiple selects, using JavaScript,  to see and get the value, if it has changed and it is NOT "Choose one" (top selection with no value) ? I can not add "onchange" event directly to the select  mark-up.

  
<select id="mainForm1" name="mainForm1" size="1">	<option value="">-- Choose one --</option>
	<option value="EMPLOYED">Employed</option>
	<option value="SELFEMPLOYED">Self-employed, Business owner</option>
	<option value="UNEMPLOYED">Not employed, Homemaker, Student</option>
	<option value="RETIRED">Retired</option>
</select>
<select id="mainFormA" name="mainFormA" size="1">	<option value="">-- Choose one --</option>
	<option value="val1">First Selection</option>
	<option value="val2">Second Selection</option>
	<option value="val3">Third Selection</option>
</select>

Open in new window

FYI.. I nnderstand how to do it for a single select but I'm wondering if there is an easier way to handle multiple selects at  the same time?
Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Consultant & Challenge Subduer
Top Expert 2009
Commented:
One way to do that is to loop through the <select> elements and add attach an event listener to each. Another is to attach an event listener to a common parent (e.g. <body> or a <form>). (With the latter you could use the same handler for checkboxes and radio button too.)

document.getElementsByTagName('form')[0].addEventListener('change',function(e){
	var el=e.target;
	if(el.nodeName.toLowerCase()!=='select') return;

	console.log(el.value,el.selectedIndex);
},false);

Open in new window

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/Events/change
Sam JacobsDirector of Technology Development, IPM

Commented:
You could try something like this:

<html>
<head>
<title>Add Event to Selects</title>

<style>

body {
    font-family: "Lucida Grande","Segoe UI",verdana,arial,helvetica,sans-serif;
    font-size: 12px;
    color: #2A2723;
}

select {
   font-size: 18px;
   width: 300px;
}

.custombutton {
    background-color: #A52E39;
    color: #FFFFFF;
    font-size:18px;
    font-weight:bold;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 2px solid #A52E39;
    margin:auto; 
    height:40px;
    width:300px;
}

</style>

<script type='text/javascript'>

 function addEvents() {
 
   var selects = document.getElementsByTagName('select');
   for(i=0;i<selects.length;i++) {
	selects[i].onchange=checkChanged;
   }
    alert("Events have been added!");
}

function checkChanged() {

   if (this.selectedIndex >0) {
	alert(this.name + " dropdown fired ... selected value: " + this.value);
   }

}

</script>
</head>

<body >

<select id="mainForm1" name="mainForm1" size="1">	<option value="">-- Choose one --</option>
	<option value="EMPLOYED">Employed</option>
	<option value="SELFEMPLOYED">Self-employed, Business owner</option>
	<option value="UNEMPLOYED">Not employed, Homemaker, Student</option>
	<option value="RETIRED">Retired</option>
</select>
<select id="mainFormA" name="mainFormA" size="1">	<option value="">-- Choose one --</option>
	<option value="val1">First Selection</option>
	<option value="val2">Second Selection</option>
	<option value="val3">Third Selection</option>
</select>

<p>
<input class="custombutton"  value="Add Events"  type="button" onclick="addEvents();">


</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial