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!

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

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

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.

LVL 44

David S.Commented: 2018-12-05

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

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

LVL 8

Sam JacobsDirector of Technology Development, IPMCommented: 2018-12-05

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

Who is Participating?