zoukankan      html  css  js  c++  java
  • 三级联动小案例

    此小案例适合数据较少的类似三级联动的小效果,省市区三级联动参见 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>
    

      

  • 相关阅读:
    NewWords/13001400
    UIWebView加载Js以及Css文件
    驾校错题集合
    NewWords/15001600
    javascript动态添加、修改、删除对象的属性和方法
    NewWords/12001300
    NewWords/11001200
    NewWords/16001700
    NewWords/14001500
    JS与iOS之间的通信
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11896810.html
Copyright © 2011-2022 走看看