三级联动小案例

小白小白从不日白

已于 2022-05-18 09:47:58 修改

阅读量284

点赞数

分类专栏： javascript 文章标签： javascript

于 2021-04-19 14:13:24 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/115862466

版权

javascript 专栏收录该内容

105 篇文章 2 订阅

订阅专栏

实现的功能：

当选择一个省份后会自动“转换”到相应的市和区

涉及的相关知识点：

1.select元素的option创建方式 [var option=new Option(‘显示的内容’);]
2.select元素添加option元素 [select.options.add(新建的option);]
3.select元素清空option的方式：[select.options.length=0;]
4.select元素改变时触发的事件：[select.οnchange=function(){}]
5.select元素当前正选中的option序号[select.selectedIndex]，序号从0开始

 	<span>省：</span>
    <select id="sheng">
        <option>请选择</option>
    </select>
    <span>市：</span>
    <select id="shi"></select>
    <span>区：</span>
    <select id="qu"></select>

 	<style>
        select {
            width: 200px;
            height: 30px;
        }
    </style>

<script>
		//选择元素
		var shengSelect = document.querySelector('#sheng');
        var shiSelect = document.querySelector('#shi');
        var quSelect = document.querySelector('#qu');

        var shengIndex = 0; //表示选了第几个省，默认市第一个(请选择)

        var shengArr = ['山西省', '辽宁省', '福建省'];
        var shiArr = [
            ['太原市', '长治市', '运城市'],
            ['铁岭市', '辽阳市'],
            ['三明市', '厦门市', '泉州市']
        ];

        var quArr = [
            [
                ['太原1区', '太原2区', '太原3区'],
                ['长治1区', '长治2区'],
                ['运城1区', '运城2区']
            ],
            [
                ['铁岭1区', '铁岭2区'],
                ['辽阳1区', '辽阳2区', '辽阳3区']
            ],
            [
                ['三明1区', '三明2区', '三明3区'],
                ['厦门1区', '厦门2区'],
                ['泉州1区', '泉州2区']
            ]
        ];

		for(var i = 0;i < shengArr.length; i++){
			var shengOption = new Option(shengArr[i]); // 创建对象
			shengSelect.options.add(shengOption );
		}
	
		shengSelect.onchange = function(eve){
			shengIndex = eve.target.selected - 1;//当前真正选中的省
	
		//判断是否选中到省，如果没有，也就是选择了“请选择”，那么则对市和区进行清空；否则输出对应的市和区
		if(shengIndex == -1){
			shiSelect.options.length = 0;
			quSelect.options.length = 0;
		}else {
			//添加市内容之前要先进行清空，防止叠加
			shiSelect.options.length = 0;
			quSelect.options.length = 0;
	
		//根据省的序号，选择对应的市
		for(var j = 0; j < shiArr[shengIndex].length; j++){
			var shiOption = new Option(shiArr[shengIndex][j]);
			shiSelect.options.add(shiOption );
		}

		//加载所选省的第一个市的区（默认）
		for(var k = 0;k < quArr[shengIndex][0].length; k++){
			var quOption = new Option(quArr[shengIndex][0][k]);
			quSelect.options.add(quOption );
		}
	}
};

//市select的change事件
shiSelect.onchange = function(eve){
	//找到选中的市
	var shiIndex = eve.target.selectedIndex;

	//添加区内容之前要先进行清空，防止叠加
	quSelect.options.length = 0;

	//给区加载option
	for(var m = 0; m < quArr[shengIndex][shiIndex].length; m++){
		var quOption = new Option(quArr[shengIndex][shiIndex][m]);
		quSelect.options.add(quOption);
	}
};
<script>

最后结果如下：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
    <script src="./js/full-citys.js"></script>
    <script src="./js/full-citys-api.js"></script>
</head>
<body>
    <!-- 1.创建省级的下拉框 -->
    <select name="" id="provence">
        <option value="-1">请选择省/直辖市/自治区</option>  
    </select>
    <!-- 2.创建省下的所有城市的下拉框-->
    <select name="" id="city">
        <option value="-1">请选择区/县</option>
    </select>

    <!-- 3.创建城市下的所有区县的下拉框 -->
    <select name="" id="area">
        <option value="-1">请选择镇/乡</option>
    </select>

    <script>
        // 这是select标签，后面多次使用，所以提取出来，方便后续使用
        let provence = document.getElementById("provence");
        let city = document.getElementById("city");
        let area = document.getElementById("area");
        // 调用API来查询所有的省数据，然后定义变量保存，然后在这个变量中循环（创建一个option，将省数据中对应的name和id赋值给option，name是省的名称，让用户可视操作，设置id是为了后面的联动，根据省的id拿到该省下级的区县数据）
        let provs= DC.getProvs();  //省数据拿到了
        for (let i=0; i<provs.length;i++){
            // 创建每个具体的省的option（循环一次，就创建一个，所以createElement要放在循环里面）
            let option= document.createElement("option");//创建了
            option.value=provs[i].id;
            option.innerHTML=provs[i].name;
            // option创建好了，option的内容也设置好了，就追加到select里面去
           provence.appendChild(option); //所有省的option设置成功
        }

        // 给省下拉框添加onchange事件---当省下拉框的值发生改变时，（value从-1改变为某个具体的省时），触发onchange事件，利用API根据当前省的id，得到对应的城市数据，追加到城市下拉框中去
        provence.onchange= function (){
            // 获取当前选中的省的id
            let provenceId= this.value;
           
            // 清除城市下拉框之前的选择-----在每一次循环追加之前，让下拉框永远保持默认的状态，把之前追加的清除掉
            // city.innerHTML='<option value="-1">请选择区/县</option>' ; 
            city.options.length=1;  
            area.options.length=1;
            //options是select特有的API，返回的是一个数组，当把数组的length设置为一个时，就只有一个option,即第一个option。
            // 当省的选择发生变化，城市和乡镇也变化，把之前追加进去的option给清空。

             // 调用API获取当前省下的城市数据
            let citys= DC.getCitys(provenceId); //城市数据获取了
            // 在循环中追加option
            for(let i=0;i<citys.length;i++){
                let option=document.createElement("option");
                option.value=citys[i].id;
                option.innerHTML=citys[i].name;
                city.appendChild(option);
            }

        }
        // 给city绑定onchange事件，当city的下拉框值发生改变时，area的内容也跟着变--利用API根据当前Provence的id和city的id，得到对应area的所有数据，在一一追加到area的option中去。
        city.onchange= function(){
            let provenceId= provence.value;
            let cityId = this.value;
            area.options.length = 1;
            let areas = DC.getAreas(provenceId,cityId);//获取所有area的数据
            for(let i=0; i<areas.length; i++){
                let option=document.createElement("option");
                option.value=areas[i].id;
                option.innerHTML=areas[i].name;
                area.appendChild(option);
            }
        }
    </script>
</body>
</html>