JavaScript实现省市联动

我们经常会遇到选择省市县的下拉框。比如我们选择了省份的话，县的下拉框会自动筛选，接下来我们就做一个这样的省市联动吧！！！

先使用一个二维数组存储省份的信息：

<script>var provinceArr=new Array(5);provinceArr[0]=new Array("南安市","泉州市","厦门市","福安市","福州市");provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");provinceArr[3]=new Array("西安市","宝鸡市","延安");provinceArr[4]=new Array("菏泽市","济南市","青岛");</script>

定义一个onchange事件进行监听：

<select onchange="provinceChange(this)"><!--显示省份--><option value="0">福建省</option><option value="1"> 河南省</option><option value="2">河北省</option><option value="3">陕西省</option><option value="4">山东省</option></select>

书写provinceChange（）函数进行检验

function provinceChange(province){
console.log(provinceArr[province.value]);//province.value是获取选择的省份
}

检验的结果：

打印出的结果说明数据已存入数组中，现在需要将它显示在下一个下拉列表中

最终效果：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>省市联动</title>
 6         <script>
 7             var provinceArr=new Array(5);
 8             provinceArr[0]=new Array("南安市","泉州市","厦门市","福安市","福州市");
 9             provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");
10             provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");
11             provinceArr[3]=new Array("西安市","宝鸡市","延安");
12             provinceArr[4]=new Array("菏泽市","济南市","青岛");
13             function provinceChange(province){
14                 //console.log(provinceArr[province.value]);
15                 var city=document.getElementById("city");
16                 if(province.value=="-1"){
17                     city.innerHTML='<option  value=\'-1\'>--请选择--</option>';
18                     return;
19
20                 }
21
22                 var cityArr=provinceArr[province.value];
23                 city.options.length=0;
24                 for(var i=0;i<cityArr.length;i++){
25                     var cityOption=document.createElement("option");//获取元素标签option
26                     cityOption.innerText=cityArr[i];//把数组里面城市的信息显示到id为city的下拉列表中
27                     city.appendChild(cityOption);
28                 }
29             }
30
31         </script>
32     </head>
33     <body>
34
35         <select οnchange="provinceChange(this)">
36             <!--显示省份-->
37             <option  value="-1">--请选择--</option>
38             <option value="0">福建省</option>
39             <option value="1"> 河南省</option>
40             <option value="2">河北省</option>
41             <option value="3">陕西省</option>
42             <option value="4">山东省</option>
43
44         </select>
45         <select id="city">
46             <!--显示市-->
47             <option  value="-1">--请选择--</option>
48         </select>
49     </body>
50 </html>

省市联动.html

转载于:https://www.cnblogs.com/jiguiyan/p/10541642.html

JavaScript实现省市联动相关推荐

javascript制作省市联动等类似二级目录
以下是参考教程中的代码,使用了双重遍历. <script>//1.创建一个二维数组用于存储省份和城市var cities = new Array(3);cities[0] = new Ar ...
JavaScript实现省市二级联动
JavaScript实现省市二级联动展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. ...
JavaScript实现二级联动(省市、楼栋)
二级联动在实际需求中使用的非常多,比如省市,楼栋等,所以我们应当也应该掌握这些前端知识. 实现效果: 利用JavaScript实现二级联动要实现JavaScript二级联动效果,首先要确定需要哪些技 ...
jQuery省市联动
用jQuery实现省市联动 <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
用JS实现简单的省市联动
用JS实现简单的省市联动博主建了一个学习群感兴趣的小伙伴可以加入一起学习交流点我进群一起学习交流!(群里有许多的学习资料,我做过的一些网页我都上传在群里了,需要的直接下载就可 ...
写收货地址代码模块的思路整理——省市联动
最近,一个同事接到一个开发任务,其中有一个功能模块就是关于收货地址的,在收货地址的回显上遇到了一些麻烦,因为我之前做过收货地址的模块,因此将经验总结于下,供大家参考: 所用技术:AngularJs 一 ...
JavaEE学习日志(六十二): jQuery遍历，jQuery事件，省市联动，左右互选
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(六十二) jQuery jQuery遍历传统遍历 jQuery对象遍历 jQuery全局函 ...
ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
支持XHTML、IE、FF的省市联动菜单
根据飞扬 <自己做的一个省市联动菜单>改写而成,支持IE.Firefox.XHTML1.0 原文链接:http://www.blogjava.net/Yang/archive/2005/ ...

JavaScript实现省市联动

JavaScript实现省市联动相关推荐

最新文章

热门文章