web前端必学功法之一：省市联动

最新推荐文章于 2023-10-23 21:25:44 发布

我是小白菜鸟

最新推荐文章于 2023-10-23 21:25:44 发布

阅读量2.7k

点赞数 2

文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/qq_42302014/article/details/120503916

版权

本文介绍了web前端中的一项重要技巧——省市联动的实现方法。通过JavaScript和jQuery两种方式详细阐述了如何创建省市选择的联动效果，帮助前端开发者掌握这一必备技能。

摘要由CSDN通过智能技术生成

web前端必学功法之一：省市联动

案例：js实现下面功能
在这里插入图片描述

        **<!-- 省市联动
              思路分析：
                    1.准备元素：定义省份与城市的下拉框
                    2.绑定事件：绑定省份下拉框的change事件
                    3.准备数据：准备数组存放省份信息,定义二维数组存放城市数据
                    4.初始化数据：将数组中的省份数据填充到省份下拉框中
                    5.下拉框change事件：根据选中的省份数据，得到对应的二维数组中的城市数据，并填充到城市下拉框中
                       创建文本节点  createTextNode()
                       创建元素      createElement()
                       追加子元素      appendChild()
                    
                实现步骤
                     1.定义省份与城市下拉框的元素
                     2.定义省份与城市下拉框所需要的数据（数组与二维数组）
                     3.填充省份下拉框的数据
                     3.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应
                     5.通过选中的值(索引) 获取二维数组中对应的数组
                     6.清空城市下拉框的选中
                     7.遍历城市数组的数据，填充城市下拉框的值
                     8.创建元素节点，创建文本节点，将文本节点追加到元素节点中
                     9.将元素节点追加到城市下拉框中
                
                    -->
  <!-- 首先我们先写好页面的布局 -->
                        
   <div align="center">

    城市：
    <select id="pro">

         <option value="">请选择</option>
    </select>
    <select id="city">

        <option value="">请选择</option>
   </select>
   </div>

 <!-- 我们这里使用两种写法，一种是js写法，另一种是jQuery写法 -->
    <script>
                    // 2.定义省份与城市下拉框所需要的数据（数组与二维数组）

                         //省份所需要的数据
                            var proList = ["北京","山西","山东","河北","河南"];
                         //城市下拉框所需要的数据