省市区-三级联动（json数据模拟）

 
 

  
  html. 
 
 
 
 

  
  		  <div>
 
 
 
 

  
  		  	<!--<span>请选择您所在区/县</span>-->
 
 
 
 

  
  		  	<select id="province" name="province" value="省">
 
 
 
 

  
  		  		<option value="">请选择您所在省</option>
 
 
 
 

  
  		  	</select>
 
 
 
 
		  	
 
 
 
 

  
  			<!--<span>请选择您所在区/县</span>-->
 
 
 
 

  
  		    <select id="area" name="area">
 
 
 
 

  
  		    	<option value="">请选择您所在区/县</option>
 
 
 
 

  
  		    </select>
 
 
 
 
		    
 
 
 
 

  
  		    <!--<span>请选择您所在城市</span>-->
 
 
 
 

  
  		    <select id="city" name="city">
 
 
 
 

  
  		    	<option value="">请选择您所在城市</option>
 
 
 
 

  
  		    </select>
 
 
 
 

  
  		  </div>
 
 
 
 

  
  js.
 
 
 
 

  
  $(function(){
 
 
 
 

  
  			//json数据
 
 
 
 

  
  			var loadInfo = "city.json";
 
 
 
 

  
  			var _data = "";
 
 
 
 

  
  			$.getJSON(loadInfo, function(data){
 
 
 
 

  
  				 _data = data;
 
 
 
 

  
  				return _data;
 
 
 
 

  
  			});
 
 
 
 

  
  			//省============================================
 
 
 
 

  
  			$.getJSON(loadInfo, function(data){
 
 
 
 

  
  				_data = data;
 
 
 
 

  
  				var count = "";
 
 
 
 

  
  				$.each(_data,function(i,val){
 
 
 
 

  
  					$.each(val,function(i,v){
 
 
 
 

  
  						var code = v.code.substr(2,5); //判断是否属于省
 
 
 
 

  
  						if(code == "0000"){
 
 
 
 

  
  							var obj = "";
 
 
 
 

  
  								obj += "<option data-id="+v.code+">"+v.name+"</option>";
 
 
 
 

  
  								count += obj;
 
 
 
 

  
  						}
 
 
 
 

  
  					})
 
 
 
 

  
  				});
 
 
 
 

  
  				$("#province").append(count);
 
 
 
 

  
  			});
 
 
 
 
			
 
 
 
 

  
  			//省============================================
 
 
 
 
		    
 
 
 
 

  
  		    //市
 
 
 
 

  
  			$("#province").on("change",function(){
 
 
 
 

  
  				var areacount = "";
 
 
 
 

  
  				var code = $(this).find("option:selected").attr("data-id");
 
 
 
 

  
  				$.each(_data,function(i,val){
 
 
 
 

  
  					$.each(val,function(i,v){
 
 
 
 

  
  						if(v.code == code){
 
 
 
 

  
  							$.each(v.city,function(i,v){
 
 
 
 

  
  								var obj = "";
 
 
 
 

  
  									obj += "<option data-id="+v.code+">"+v.name+"</option>";
 
 
 
 

  
  									areacount += obj;
 
 
 
 

  
  							})
 
 
 
 

  
  						}else{
 
 
 
 

  
  								$("#city").empty();
 
 
 
 

  
  						}
 
 
 
 

  
  					})
 
 
 
 

  
  				});
 
 
 
 

  
  				$("#area").empty();
 
 
 
 

  
  				$("#area").append(areacount);
 
 
 
 

  
  			});
 
 
 
 
			
 
 
 
 

  
  			//城市
 
 
 
 

  
  			$("#area").on("change",function(){
 
 
 
 

  
  				var citycount = "";
 
 
 
 

  
  				var code = $(this).find("option:selected").attr("data-id");
 
 
 
 

  
  				$.each(_data,function(i,val){
 
 
 
 

  
  					$.each(val,function(i,v){
 
 
 
 

  
  						$.each(v.city,function(i,v){
 
 
 
 

  
  							if(v.code == code){
 
 
 
 

  
  								$.each(v.area,function(i,v){
 
 
 
 

  
  									var obj = "";
 
 
 
 

  
  										obj += "<option data-id="+v.code+">"+v.name+"</option>";
 
 
 
 

  
  										citycount += obj;
 
 
 
 

  
  								})
 
 
 
 

  
  							}
 
 
 
 

  
  

 
 
 
 

  
  							})
 
 
 
 
						
 
 
 
 

  
  					})
 
 
 
 

  
  				});
 
 
 
 

  
  				$("#city").empty();
 
 
 
 

  
  				$("#city").append(citycount);
 
 
 
 

  
  			})
 
 
 
 

  
  		})