使用json数据实现简单的三级联动

json数据格式:

var data = {
	"province": ["广东省","广东省","广东省","广东省","广东省","广东省","广东省"],
	"city":{
		"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
		"山东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
		"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
		"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
		"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
		"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
		"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"]
	},
	"shop": {
		"韶关市":{
			"101":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"102":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"103":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			}
		},
		"广州市":{
			"104":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"105":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"106":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"107":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"108":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"109":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			}
		},
		"深圳市":{
			"110":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"111":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			},
			"112":{
				"name": "韶关大店",
				"address":"韶关市吴江区"
			}
		},
	}
}

HTML代码：

		<div class="select">
			<select name="" id="province">
				<option value="">省</option>
			</select>
			<select name="" id="city">
				<option value="">市</option>
			</select>
			<select name="" id="shop">
				<option value="">门店</option>
			</select>
		</div>
		<div class="store">
			<p id="shop_1"></p>
			<p><span id="txt1"></span><span id="shop_address"></span></p>
			<p id="txt2">赶紧点击上方查找门店吧！</p>
		</div>





js代码：
//数据传进来之前就给省框option赋值
	postJsonData('http://pj.dianmila.com/colgate/children_api.php?a=area_list',{ name: '' },function(data){
		if( data.state == 1 ){
			var Pro1 = '';
			for( var i=0; i<data.province.length; i++){
				var Pro = '<option value="">'+ data.province[i] +'</option>';
				Pro1 += Pro;
			}
			$('#province').append(Pro1);

			

		//监听省的变化，然后显示相应的市区
			$('#province').on('change',function(){
				var oCity = document.getElementById('city');
				oCity.innerHTML = '<option>市</option>';
				var City1 = '';
				var City2 = $('#province').children('option:selected').text();//获取到被选中的option省份值
				for( var city_1 in data.city ){//city_1代表了city里面的所有属性名即省份名称
					if( City2 == city_1 ){//如果上方循环道德属性名和获取到被选中的省份名一样就进入这个省份下的城市列表去去全部值出来
						for( var i=0; i<data.city[city_1].length; i++){//这边一定要使用索引了，如果还是用键值是实现不了的
							var City3 = '<option value="">'+ data.city[city_1][i] +'</option>';
							City1 += City3;
						}
						$('#city').append(City1);
					}
				}
			});	

		//监听市的变化，然后显示相应的门店				
		$('#city').on('change',function(){
			var oShop = document.getElementById('shop');
			oShop.innerHTML = '<option>门店</option>';
			var Shop = '';
			var Shop2 = $('#city').children('option:selected').text();
			for( var shop_1 in data.shop ){//shop_1代表了shop里面的所有属性名即城市名称
				if( Shop2 == shop_1 ){
					
					for( var m in data.shop[shop_1]){//m代表了城市里面的所有属性名即'101'这些,下方取值也是用索引
						var Shop1 = '<option value="">'+ data.shop[shop_1][m].name +'</option>';
						Shop += Shop1;
					}
					$('#shop').append(Shop);
				}
			}
		});

		//监听门店的变化，然后下方显示相应的内容				
		$('#shop').on('change',function(){
			var Shop = '';
			var Shop2 = $('#city').children('option:selected').text();
			var Shop3 = $('#shop').children('option:selected').text();
			$('#txt1').text('门店地址:');
			$('#txt2').text('赶快来参加活动吧！');
			for( var shop_1 in data.shop ){
				if( Shop2 == shop_1 ){
					for( var m in data.shop[shop_1]){
						if( Shop3 == data.shop[shop_1][m].name ){//当被选中的门店名称和循环到的门店相等的时候赋值
							$('#shop_1').text(Shop3);
							$('#shop_address').text(data.shop[shop_1][m].address);
						}
					}
					$('#shop').append(Shop);
				}
			}
		});

			
			
		}/*else if(data.state == 3){
			if(confirm("你确定登陆么？") ){
				window.location.href= 'http://pj.dianmila.com/lamsoon/bakeryExpo2017_api.php?a=init&from=1';
			}else {
				// 留在本页面
			}
		}	*/
	},null,"send_data");