省市三级联动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	
</head>
<body>
	 
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city">请选择</select>
<select id="country">请选择</select>
<script>
		var provinceArr=["内蒙古","河南","山东"];
		var cityArr=[
			["呼和浩特","赤峰","鄂尔多斯"],
			["洛阳","开封","驻马店","南阳"],
			["济南","烟台","日照","东营"]
		];
		
		var countryArr=[
			[["赛罕区","玉泉区","新城区"],
			 ["红山区","松山区","元宝山区","宁城县"],
			 ["东胜区","康巴什区","准格尔旗","达拉特旗"]],
			[["洛龙区","老城区","孟津区","偃师区","新安县"],
	 		 ["龙亭区","鼓楼区","祥符区"],
			 ["驿城区","西平县"],
			 ["宛城区","西峡县","南召县"]],
			[["历下区","天桥区","市中区"],
			 ["福山区","莱山区","蓬莱区","招远市"],
			 ["东港区","岚山区","五莲县"],
			 ["东营区","河口区","利津县","广饶县"]],
		];

		function createOption(obj,data){
			for(var i in data){
				var op = new Option(data[i],i);
				obj.options.add(op);
			}
		};
	
	var provice = document.getElementById('province');
	createOption(provice,provinceArr);

	var city = document.getElementById('city');
	provice.onchange = function(){
		city.options.length =0;
		createOption(city,cityArr[provice.value]);
		if(provice.value>=0){ 
			city.onchange();
		}else{ country.options.length = 0;
		}
	}

	var country = document.getElementById('country');
	city.onchange = function(){
		country.options.length = 0;
		createOption(country,countryArr[provice.value][city.value]);
	}
</script>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值