js三级联动

		<select id="province" onchange="getCity()">
                        <option value="0">所在省</option>
                        <option value="直辖市">直辖市</option>
                        <option value="广东省">广东省</option>
                        <option value="江苏省">江苏省</option>
                        <option value="福建省">福建省</option>    
                    </select>
                    <select id="city" onchange="getDistrict()">
                        <option value="0">所在市</option>
                    </select>
                    <select  id="district">
                        <option value="0">所在区</option>
                    </select>

根据数据下标简单的绑定判断

<script>
var city=[
   ["所在市","北京市","天津市","上海市","重庆市"],
   ["所在市","广州市","深圳市","珠海市","东莞市"],
   ["所在市","南京市","苏州市","南通市","常州市"],
   ["所在市","福州市","厦门市","莆田市","泉州市"]
   ];
var district=[
    [
        ["东城区","西城区","宣武区"],["和平区","红桥区","塘沽区"],["杨浦区","徐汇区"],["万州区","涪陵区"]
    ],
    [
        ["天河区","海珠区","白云区","番禺区"],["南山区","宝安区","福田区"],["香洲区","斗门区","金湾区"],["东城区","莞城区","万江区"]
    ],
    [
        ['玄武区','白下区','秦淮区','建邺区'],['沧浪区','平江区','金阊区','虎丘区'],['崇川区','港闸区','海安县','如东县'],['天宁区','钟楼区','新北区']
    ],
    [
        ['鼓楼区','台江区','仓山区','马尾区'],['思明区','海沧区','湖里区','集美区'],['城厢区','涵江区','荔城区','秀屿区'],['鲤城区','丰泽区','洛江区','泉港区']
    ]
];

//根据选择省份添加市

var pro=-1;//定义变量记录选择的省份下标
		function getCity(){
			var pr=document.getElementById("province");
			var citys=document.getElementById("city");
			var qu=document.getElementById("district");
			citys.length=0;//每次触发清空上一次的内容
			pro=pr.selectedIndex-1;
			for(var a=0;a<city.length;a++){
				if(pro==a){//根据下标判断
					for(var b in city[a]){
						citys.add(new Option(city[a][b],city[a][b],true,false));
					}
					
				}
				if(pr.selectedIndex==0){//省份切换到所在省选项,市和区清空
					citys.length=0;
					qu.length=0;
					citys.add(new Option("所在市" ,"所在市",true,false))
					qu.add(new Option("所在区" ,"所在区",true,false));
				}
			}
		}
		
		
		
//根据市区添加区县
	function getDistrict(){
		var citys=document.getElementById("city");
		var qu=document.getElementById("district");
		qu.length=0;
		var slequ= citys.selectedIndex-1;//选择的市下标
		for (var x=0;x<district[pro].length;x++){
			
			if(slequ==x){
				console.log(district[pro][x])
				for (var y in district[pro][x]) {
					qu.add(new Option(district[pro][x][y],district[pro][x][y],true,false));
				}
			}
				if(citys.selectedIndex==0){
					qu.length=0;
					qu.add(new Option("所在区" ,"所在区",true,false));
				}
		}
	}

	</script>

猜你喜欢

转载自blog.csdn.net/qq_40262090/article/details/80889268