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

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

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