使用javaScript实现省市级联

最新推荐文章于 2022-05-28 14:50:31 发布

无痕的荇菜

最新推荐文章于 2022-05-28 14:50:31 发布

阅读量740

点赞数 2

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

本文链接：https://blog.csdn.net/noMarks/article/details/102595808

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在实际项目中,前端的下拉框组件是一定会使用到的,省市级联算是下拉控件的经典情境了,那么咱们开始行动吧.
基本界面:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>省市级联</title>
    <style>
        select {
            height: 20px;
            line-height: 20px;
        }
    </style>
</head>
<body>
省:<select id="province">
<option>--请选择--</option>
</select>
市:<select id="city">
<option>--请选择--</option>
</select>
</body>
</html>

初始界面效果:

在这里插入图片描述

大概思路:准备省和市的数据,在窗体加载的时候,加载省的数据,然后拿到省select的onchange事件,根据省的value查询对应的市数据,加载到市的select中即可.
直接把代码贴上来吧,代码里边写好了每一步实现.

<script>
    //准备省,市的数据
    let provinceData={"beijing":"北京","shanxi":"山西","hubei":"湖北"};
    let cityData={"beijing":[{"dongcheng":"东城区"},{"xicheng":"西城区"},{"chaoyang":"朝阳区"}],
        "shanxi":[{"datong":"大同市"},{"taiyuan":"太原市"},{"xinzhou":"忻州市"}],
        "hubei":[{"wuhan":"武汉市"},{"xiaogan":"孝感市"}]};
    //获取省标签
    let provSelect = document.querySelector("#province");
    //获取市标签
    let citySelect = document.querySelector("#city");

    //窗体加载时,加载省数据
    window.onload=function () {
        //获取省标签
        //迭代省的数据
        //forin可以遍历数组和对象,遍历的结果是数组的索引或者对象的键
        // forof遍历数组的元素,遍历的结果是数组的值
        for (let i in provinceData) {
            //创建option标签
            let provOption=document.createElement("option");
            provOption.value=i;
            provOption.innerHTML=provinceData[i];
            //追加到select中
            provSelect.appendChild(provOption);
            //第二种追加的简单方法  直接provSelect.innerHtml="标签"
        }
    }
    //省的下拉框值有改变的时候,加载市的数据
    provSelect.onchange=function () {
        //省select没改变一会,清空市的option(假如不清空,省select改变,市select会保留上次的option
       citySelect.innerHTML = '<option value="0">--请选择--</option>';
       //得到市的数据
        let cityTempData = cityData[this.value];
        for (let i=0;i<cityTempData.length;i++) {
            for (let j in cityTempData[i]) {
                let cityOption = document.createElement("option");
                cityOption.value=j;
                cityOption.innerHTML='<option value="'+j+'">'+cityTempData[i][j]+'</option>';
                citySelect.appendChild(cityOption);
            }
        }
    }
</script>