码迷,mamicode.com
首页 > 其他好文 > 详细

三级联动小案例

时间:2019-11-20 12:47:18      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:rip   change   lan   选择   county   级联   log   length   三级   

此小案例适合数据较少的类似三级联动的小效果,省市区三级联动参见 https://www.cnblogs.com/xiaoyaolang/p/11896484.html

	<body>
		<select name="" id="prov">
			<option value="">请选择省</option>
		</select>
		<select name="" id="city">
			<option value="">请选择市</option>
			<option value="">请先选择省</option>
		</select>
		<select name="" id="county">
			<option value="">请选择县</option>
			<option value="">请先选择市</option>
		</select>
	</body>
</html>
<script src="jquery-1.8.1.min.js"></script>
<script>
	var provArr = ["辽宁","山西","河北"];
	//              0      1     2
	var cityArr = [["沈阳","大连","铁岭"],["大同","太原"],["邯郸","石家庄","唐山","雄安"]];
	//                 0    1     2       0       1        0      1       2       3     
	var countyArr = [[["s1","s2"],["d1"],["昌图","莲花乡"]],[["t1","t2"],["y1"]],[["h1"],["s1","s2"],["tangshan1"],["xiongan1"]]];
	//                00            01       02              10          11      20        21
	//页面加载后 将省的数组信息 添加到页面上
	for(var i = 0; i < provArr.length; i++){
		$("#prov").append($("<option value="+i+">"+provArr[i]+"</option>"));
	}
	$("#prov").change(function(){//点击省把市添加进来
		$("#city")[0].length = 1;
		var index = $(this).val();//省的下标  0-1
		var cityAry = cityArr[index];
		for(var i = 0; i < cityAry.length; i++){
			$("#city").append($("<option value="+index+"-"+i+">"+cityAry[i]+"</option>"));
		}
	})
	$("#city").change(function(){
		$("#county")[0].length = 1;
		var index = $(this).val();//0-0  0-1  0-2
		var proIndex = index.split("-")[0];//省的下标
		var cityIndex = index.split("-")[1];//城市的下标
		var countyAry = countyArr[proIndex][cityIndex];
		for(var i = 0; i < countyAry.length; i++){
			$("#county").append($("<option>"+countyAry[i]+"</option>"));	
		}
	})
</script>

  

三级联动小案例

标签:rip   change   lan   选择   county   级联   log   length   三级   

原文地址:https://www.cnblogs.com/xiaoyaolang/p/11896810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!