Avatar of MJ
MJ
Flag for United States of America asked on

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!
JavaScript

Avatar of undefined
Last Comment
Sam Jacobs

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
David S.

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Sam Jacobs

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

Your help has saved me hundreds of hours of internet surfing.
fblack61