$(document).ready(function(){
	$("#state").change(function(){
		var json_option = $("#state").val();
		//alert(json_option);
		
		
		$("#city").empty().append("<option>loading...</option>"); //show loading...
		
		var json_url = "/ajaxphp/fetchcity.php?state=" + encodeURIComponent(json_option);
		
		$.getJSON(json_url,function(data){
			
			$("#city").empty(); //clear states selections
			if(data==""){
				$("#city").append("<option value=\"0\">No city found</option>");
			}
			else{
				for(i=0; i<data.id.length; i++){
					$("#city").append("<option value=\"" + data.id[i]  + "\">" + data.state[i]  + "</option>");
				}
			}
			
			
		});
		
		return false;
	});
	

});