实现简单的省市联动(通过HTML和JS)

本文介绍: 这篇文章主要为大家详细介绍了Jav aScri p t 实现简单省市联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

通过HTML和JS实现简单的省市联动,包括具体思路和具体代码,仅供参考,具体内容如下:

一思路 分析:

1.准备省份与城市的下拉框

2.准备省份与对应城市基础的数据(省份用数组,城市用二维数组)

3.给省份下拉框填充数据

4.绑定省份下拉框的on change 事件

5.获取省份下拉框中被选中的选项的索引

6.通过被选中的索引,获取城市二维数组中对应的数组

7.将城市数组的数据填充到城市下拉框中

8.每次切换省份下拉框的选项时,将城市下拉框的选项调回默认值

二具体代码:

第一部分:完整代码

<!DOCTYPE html&g t;
<!– 文档申明,当前使用版本HTML5 –>
<!– HTML文档的start –>
<html>
   <!– 网页标题栏 start –>
   <head>
       <!– 声明语言 –>
       <meta chars et=”utf-8″>
       <!– 标题栏 –>
       <title>省市联动</ti tle>
   <!– 网页标题栏end –>
   </head>
   <!– 网页主体内容的开始 –>
   <body>
       <!– 1.准备省份与城市的下拉框 –>
       请选择地址:
       <select id=”pro“>
           <option value=””>请选择省份</option>
       </select>
       <select id=”city“>
           <option value=””>请选择城市</option>
       </select>

       <script type=”text/javascript“>
           //2.准备省份与对应城市基础的数据(省份用数组,城市用二维数组)
           var pro = [‘江苏省’,’浙江省’,’安徽省’];
           var city = [
               [‘南京市’,’苏州市’,’无锡市’,’徐州市’],
               [‘杭州市’,’宁波市’,’绍兴市’,’湖州市’],
               [“合肥市”,”滁州市”,”芜湖市”,”宣城市”]
           ];

           //3.给省份下拉框填充数据
           //3.1 循环遍历省份数组
           fo r (var i = 0;i < pro.length;i++){
               //3.2 创建 option 对象,并设置对应的值
               var opt = document.createElem ent(“option“);
               opt.value = i;
               opt.text = pro[i];
               //3.3 将option 对象追加到省份下拉框中
               document.getElem entById(‘pro‘).appendChi ld(opt);
           }

           //4 绑定省份下拉框的onch ane 事件
           docum ent.getElementById(‘p ro‘).onchange = function(){

               // 8 每次切换省份下拉框的下拉选项时，返回城市下拉框的默认选项
               document.getElementById(“city“).innerHTML = ‘<opt ion value =””>请选择城市</opt ion>’;

               //5 获取省份下拉框中被选中的选项的索引
               //下拉框被选中的value正好与城市二维数组的值对应
               var index = document.getElementById(‘p ro‘).value;

               //6 通过被选中的索引,获取城市二维数组中对应的数组
               var cityLi st = city[index];

               //7 将城市数组的数据填充到城市下拉框中,同3步骤一样
               //7.1 循环遍历城市二维数组
               fo r (va r i = 0; i < cityList.length;i++){
                   //7.2 创建 opt ion对象,并设置对应的值
                   va r opt = document.createElement(‘opt ion’);
                   opt.value = i;
                   opt.text = cityList[i];
                   // 7.3 将op ti on对象追加到城市下拉框中
                   d ocument.getElementById(‘city’).appendChi ld(o pt);
               }
           }
       </script>

   <!– 网页主体内容的结束 –>
   </body>
<!– HTML文档的end –>
</html>

第二部分 效果图

注意 :

①文中索引,也可以采取selectedInde x来获取省份下拉框被选中项的索引;

eg示例: va r index = document.getElementById(‘pro‘).selectedInde x;

②思路分析第8步骤,需要将innerHTML事件绑定在第四步之后,在onchang事件触发函数就需要调用,另不建议设置为空值,因为则这样修改省份下拉框选项时候会清楚城市下拉框的默认值;

③在JS里do cu ment.getElementById(),可以考虑用$方法来便捷操作;id 可以考虑用#,仅供参考

④基础数据数组方面,本文采取的二维数组,也可以采用对象类型：
                   va r data = {
                       “上海市”:[“浦东新区”,”静安区”,”普陀区”,”闵行区”],
                       “江苏省”:[“南京市”,”苏州市”,”无锡市”,”常州市”]
                   }