var first = "state1"; //id of first SELECT 
var second = "city1"; //id of second SELECT
var third = "state2"; //id of first SELECT 
var fourth = "city2"; //id of second SELECT
var flag=0;
// 
function sendRequest(url,params,HttpMethod) {
	if(!HttpMethod) { //check if http method is defined, if not, set it to GET
	HttpMethod="GET"; }
	// 
	// initialize request object
	req=null;
	if(window.XMLHttpRequest){
		req=new XMLHttpRequest; //mozilla/safari
		                     }
	else if(window.ActiveXObject){
		req=new ActiveXObject("Microsoft.XMLHTTP");//internet explorer
		} // //define callback handler
		if(req) { //
		req.onreadystatechange=onReadyState;
		req.open(HttpMethod,url,true);
		req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//alert(params);
		req.send(params);
		}
		} // 


    
		function onReadyState() { //
		var ready=req.readyState;
		var data=null;
		if(ready==4){ //check ready state
		data=req.responseText; //read response data
		//alert(data);
		var items = data.split(',');
		var length = items.length;
		for(var i = 0; i < length; i++) {
			var childEl = document.createElement('option'); //create option
            if(flag==0)
			{
			var El = document.getElementById(second);
			}
			else
			{
			var El = document.getElementById(fourth);
			}
			El.appendChild(childEl); //then append it to the second dropdown list
			childEl.value = items[i];
			childEl.innerHTML = items[i];
			stoploading1();
			//alert(childEl.innerHTML);
			}
			}
			} // 

		
			
			function clicked1() { //
			//alert("clicked");
			flag=0;
			//showloading();
			//alert(document.getElementById(second));
			var el = document.getElementById(first);
			var ob2=document.getElementById(second);
			var selected = el.selectedIndex; //
			//alert(selected);
			while(ob2.hasChildNodes()) {
				//removes items from dropdown if some already exist
				ob2.removeChild(ob2.firstChild);
				}
				if(selected!= 0) 
					{ //if they choose something other than the first select-->"Select state1 first" 
				//alert(el.options[selected].value);
				sendRequest('fetch.php?state1='+el.options[selected].value+'&flag=0');
				ob2.disabled=0;
				//stoploading()
				} 
				else
					{ //otherwise add the Select state1 First option and disable it
				var childEl = document.createElement('option');
				ob2.appendChild(childEl);
				childEl.innerHTML = 'Select State';
				ob2.disabled=1;
				}
				} 

				function clicked2() { //
				//alert("clicked");
				flag=1;
			var e2 = document.getElementById(third);
			var ob3=document.getElementById(fourth);
			var selected = e2.selectedIndex; //
			//alert(selected);
			while(ob3.hasChildNodes()) {
				//removes items from dropdown if some already exist
				ob3.removeChild(ob3.firstChild);
				}
				if(selected!= 0) 
					{ //if they choose something other than the first select-->"Select state1 first" 
				//alert(e2.options[selected].value);
				sendRequest('fetch1.php?state2='+e2.options[selected].value+'&flag=1');
				ob3.disabled=0;
				} 
				else
					{ //otherwise add the Select state1 First option and disable it
				var childEl = document.createElement('option');
				ob3.appendChild(childEl);
				childEl.innerHTML = 'Select State';
				ob3.disabled=1;
				}
				}