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":"韶關市吳江區"
			}
		},
	}
}
 

<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>

//資料傳進來之前就給省框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");