How can I alert depending on document.getElementById selected?

JavaScript
1

Hi I have a form with two select drop down i’ve gave each their own different ID but now i am trying to use the document.getElementById on both but its only picking up second one how can I get so that depending on the select iD user picks it would be like if document.getElementById(“location”) alert location else if document.getElementById(“color”) alert color.

I have tried but its just call the second document.getElementById(“color”)

Heres’ the form


<form action="<?php bloginfo('url'); ?>" method="get" class="x">
<select id="location" >
 <option value="america">Great Site</option>
 <option value="england">Better Site</option>
</select>

<select id="color" >
 <option value="blue">Great Site</option>
 <option value="red">Better Site</option>
</select>
</form>

here the function I have tried but doesnt work it skips the first if statment how can i get to select the if statement depending on the select ID the user picks

function()
	{
	 var selectBox = document.getElementById("location");
	 var selectBox1 = document.getElementById("color");
   	 var selectValue = selectBox.options[selectBox.selectedIndex].value;
	

   		if (selectBox == "location")
			{
			alert("location");
			}
			else
		 if (selectBox1 == "color");
			{
				alert("color");
			}
		
	}}}(jQuery,window,undefined));
2

Hi,
Try this code (must be added after the <select> lists.

<script type="text/javascript"><!--
function fname(){
  if(this.id == "location"){
    alert("location");
  }
  else if (this.id == "color"){
    alert("color");
  }
}
document.getElementById('location').onchange = fname;
document.getElementById('color').onchange = fname;
//-->
</script>
3

Alternatively, you can try adding a class to the selects then cycle through them to alert the id:


<form method="get">
	<select id="location" class="selectBox">
		<option value="america">Great Site</option>
		<option value="england">Better Site</option>
	</select>

	<select id="color" class="selectBox">
		<option value="blue">Great Site</option>
		<option value="red">Better Site</option>
	</select>
</form>


<script>
	var selects = document.querySelectorAll('.selectBox'),
		i;
	for( i = 0; i < selects.length; i++ ) {
		selects[i].onchange = function() {
			alert(this.id);
		};			
	}
</script>