JavaScript实现select下拉菜单省份和城市的级联菜单

使用JavaScript中变量定义省份及对应的城市，应用select标签对象，实现二级级联的下拉菜单选中效果。即在省份下拉菜单中选中一个省份时，在城市下拉菜单中出现该省份对应的城市。

HTML代码：

1.  
   <div class="choosecity">
2.  
   <p>选择所在的省份及城市</p>
3.  
   省份：<select id="province"></select>
4.  
   城市：<select id="city">
5.  
   <option value="">---请选择---</option></select>
6.  
   </div>

JavaScript代码：

1、定义数组存储省份数据和城市数据  注：这里城市的数组下标使用的是省份名称

1.  
   var provinceArr = ['北京市','天津市','上海市','重庆市','河北省','山西省','辽宁省','吉林省'];
2.  
   var cityArr = new Array();
3.  
   cityArr['北京市'] = ['北京市'];
4.  
   cityArr['天津市'] = ['天津市'];
5.  
   cityArr['上海市'] = ['上海市'];
6.  
   cityArr['重庆市'] = ['重庆市'];
7.  
   cityArr['河北省'] = ['石家庄市','张家口市','承德市','唐山市','秦皇岛市','廊坊市','保定市','沧州市','衡水市','邢台市','邯郸市'];
8.  
   cityArr['山西省'] = ['太原市','大同市','朔州市','忻州市','阳泉市','晋中市','吕梁市','长治市','临汾市','晋城市','运城市'];
9.  
   cityArr['辽宁省'] = ['沈阳市','铁岭市','阜新市','抚顺市','朝阳市','本溪市','辽阳市','鞍山市','盘锦市','锦州市','葫芦岛市','营口市','丹东市','大连市'];
10.  
    cityArr['吉林省'] = ['长春市','白城市','松原市','吉林市','四平市','辽源市','白山市','通化市'];

2、定义函数：显示省份   注：这里使用立即执行函数 页面加载时就显示数据

1.  
   (function displayProvince(){
2.  
   // 使用循环将省份显示到下拉菜单中
3.  
   for(let i = 0;i<provinceArr.length;i ){
4.  
   // 获取省份select控件
5.  
   let province = document.querySelector('#province');
6.  
   // 注册onchange事件：当省份发生改变 后面的城市也跟着变化
7.  
   province.onchange = displayCity;
8.  
   // 创建option节点
9.  
   let option = document.createElement('option');
10.  
    // 创建文本节点
11.  
    let pro = document.createTextNode(provinceArr[i]);
12.  
    // 将文本节点添加到option中
13.  
    option.appendChild(pro);
14.  
    // 将option追加到select中
15.  
    province.appendChild(option);
16.  
    }
17.  
    // 调用显示城市函数，让该方法也立即执行
18.  
    displayCity();
19.  
    })()

3、定义函数：显示城市

1.  
   function displayCity(){
2.  
   // 获取城市select控件
3.  
   let city = document.querySelector('#city');
4.  
   // 先将option数据清空
5.  
   city.options.length = 1;
6.  
   // 获取省份中的value值
7.  
   let provice = document.querySelector('#province').value;
8.  
   // 循环添加省份所对应的城市
9.  
   for(let i = 0;i<cityArr[provice].length;i ){
10.  
    // 创建option节点
11.  
    let option = document.createElement('option');
12.  
    // 创建文本节点
13.  
    let citytxt = document.createTextNode(cityArr[provice][i]);
14.  
    // 将文本节点添加到option中
15.  
    option.appendChild(citytxt);
16.  
    // 将option追加到select中
17.  
    city.appendChild(option);
18.  
    }
19.  
    }

最终实现效果：

这篇好文章是转载于：学新通技术网