如何用JS实现城市三级联动!

男娘i 2023-01-14 01:57 146阅读 0赞

# 城市三级联动 #

## 1.思路及写法 ##

> （1）、首先在网上下载我们所需要用到的json包，里面包含中国的省份以及对应的地级市和县级单位；
> 
> （2）、第一步首先遍历一下json包里面的对象，分析如何将省份和地级市和县级单位对应起来，可以 发现每一个里面都有唯一的code！
> 
> （3）、遍历一遍省份，创建34个对象，将每个省份分别插入到相应的第一个下拉框中；
> 
> （4）、同上省份中的一样，创建省份下对应的市级单位创建对象插入到第二个下拉框中，可以利用code 唯一的原理判断与之相对应的地级市；
> 
> （5）、同上市区中的一样，创建地级市下对应的县级单位创建对象插入到第三个下拉框中，可以利用code唯一的原理判断与之相对应的县级单位；

## 2.展示结果图如下： ##

（1）、如图是在网上下载的一个json包，在vscode里面打印便于分析的!

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]

（2）、结果展示：  
![在这里插入图片描述][20210419225300108.gif_pic_center]

## 3.参考代码 ##

**html部分**：

<!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/area-json.js"></script> 
        
        <script src="../js/index.js"></script>
    </head>
    <body>
            
            
            <select name="" id="one">
                <option value="">省份</option>
            </select>
            
            <select name="" id="two">
                <option value="">地级市</option>
            </select>
            
            <select name="" id="three">
                <option value="">市、县、区</option>
            </select> 
    </body>
    </html>

**js部分：**

## 总结： ##

完成这个城市三级联动所需要具备的需要掌握对dom元素的操作，以及将循环结构融会贯通，理清其中的元素关系，准确分析即可！大家快动起小手来试一下吧（**由于json包代码量有点多，我就没有展示出来，需要的可以私信我,其中代码可以简写由于时间关系我就没有弄，大家写的时候可以精简一下）！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/b1ff7812f3a04461a85083becf02300f.png
[20210419225300108.gif_pic_center]: /images/20221022/aca723f9f3314c729e1bcdd3f23dae9b.png