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

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!
894359Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Sam JacobsDirector of Technology Development, IPMCommented:
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

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.