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
HTML Code:
<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
Code:
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));