AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用JavaScript实现动态省市县三级联动

2016-05-10 4245
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

 像平时购物选择地址时一样，通过选择的省动态加载城市列表，通过选择的城市动态加载县区列表，从而可以实现省市县的三级联动，下面使用原生的JavaScript来实现这个功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head lang= "en" >
     <meta charset= "UTF-8" >
     <title>三级联动测试</title>
     <script src= "jquery-2.1.4.min.js" ></script>
     <script type= "text/javascript" >
         //用来获得option元素中selected属性为true的元素的id
         function  Get_Selected_Id(place){
             var  pro = document.getElementById(place);
             var  Selected_Id = pro.options[pro.selectedIndex].id;
             return  Selected_Id;          //返回selected属性为true的元素的id
         }
         //改变下一个级联的option元素的内容，即加载市或县
         function  Get_Next_Place(This_Place_ID,Action){
             var  Selected_Id = Get_Selected_Id(This_Place_ID);    //Selected_Id用来记录当前被选中的省或市的ID
             if (Action== 'Get_city' )                             //从而可以在下一个级联中加载相应的市或县
                 Add_city(Selected_Id);
             else  if (Action== 'Get_country' )
                 Add_country(Selected_Id);
         }
         //用来存储省市区的数据结构
         var  Place_dict = {
             "GuangDong" :{
                             "GuangZhou" :[ "PanYu" , "HuangPu" , "TianHe" ],
                             "QingYuan" :[ "QingCheng" , "YingDe" , "LianShan" ],
                             "FoShan" :[ "NanHai" , "ShunDe" , "SanShui" ]
                             },
             "ShanDong" :{
                             "JiNan" :[ "LiXia" , "ShiZhong" , "TianQiao" ],
                             "QingDao" :[ "ShiNan" , "HuangDao" , "JiaoZhou" ]
                             },
             "HuNan" :{
                             "ChangSha" :[ "KaiFu" , "YuHua" , "WangCheng" ],
                             "ChenZhou" :[ "BeiHu" , "SuXian" , "YongXian" ]
                         }
         };
         //加载城市选项
         function  Add_city(Province_Selected_Id){
             $( "#city" ).empty();
             $( "#city" ).append( "<option>City</option>" );
             $( "#country" ).empty();
             $( "#country" ).append( "<option>Country</option>" );
             //上面的两次清空与两次添加是为了保持级联的一致性
             var  province_dict = Place_dict[Province_Selected_Id];    //获得一个省的字典
             for (city  in  province_dict){      //取得省的字典中的城市
                 //添加内容的同时在option标签中添加对应的城市ID
                 var  text =  "<option" + " id='" +city+ "'>" +city+ "</option>" ;
                 $( "#city" ).append(text);
                 console.log(text);   //用来观察生成的text数据
             }
         }
         //加载县区选项
         function  Add_country(City_Selected_Id){
             $( "#country" ).empty();
             $( "#country" ).append( "<option>Country</option>" );
             //上面的清空与添加是为了保持级联的一致性
             var  Province_Selected_ID = Get_Selected_Id( "province" );      //获得被选中省的ID，从而方便在字典中加载数据
             var  country_list = Place_dict[Province_Selected_ID][City_Selected_Id];   //获得城市列表
             for (index  in  country_list){
                 ////添加内容的同时在option标签中添加对应的县区ID
                 var  text =  "<option" + " id=\'" +country_list[index]+ "\'>" +country_list[index]+ "</option>" ;
                 $( "#country" ).append(text);
                 console.log(text);   //用来观察生成的text数据
             }
         }
 
     </script>
</head>
<body>
     <p>您的收货地址：</p>
     <select id= "province"  onchange= "Get_Next_Place('province','Get_city')" >
         <option id= "Not_data1" >Province</option>
         <option id= "GuangDong"  value= "GuangDong" >GuangDong</option>
         <option id= "ShanDong"  value= "ShanDong" >ShanDong</option>
         <option id= "HuNan"  value= "HuNan" >HuNan</option>
     </select>
     <select id= "city"  onchange= "Get_Next_Place('city','Get_country')" >
         <option id= "Not_data2" >City</option>
     </select>
     <select id= "country" >
         <option id= "Not_data3" >Country</option>
     </select>
     <br/>
</body>
</html>

    测试结果如下：

未做任何选择时：

wKioL1ZTSIeySWi_AAATUBoInwo229.png

wKiom1ZTSC3TAmTUAAALXQPSNBg490.png

wKiom1ZTSC2Qu8CFAAAMuY2GuxQ935.png

选择时：

wKioL1ZTSKSSxNSfAAAVJgK5-nk498.png

wKiom1ZTSEnh1eZVAAASQzkydS0868.png

    当然，省市县三者都是动态联动的，只要顶级的内容发生改变，所有子级的内容也会发生改变或被重置为City或Country.

文章标签：
JavaScript
Web App开发
前端开发
关键词：
JavaScript动态
香飘叶子
目录
相关文章
疯狂的猿
|
4月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
疯狂的猿
30 0
JS代码动态打印404页面源码
疯狂的猿
|
4月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件，支持样式类型，当前页，每页显示数量，按钮数量，总条数，上一页文字，下一页文字，输入框跳转等功能。
疯狂的猿
41 1
朝阳39
|
4月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
朝阳39
89 1
sunrr
|
5月前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
sunrr
70 3
奔跑的数据
|
6月前
|
数据采集 JavaScript 前端开发
使用Go和JavaScript爬取股吧动态信息的完整指南
本文介绍了如何使用Go和JavaScript构建网络爬虫，从股吧网站抓取实时股市信息。通过设置代理服务器以应对反爬策略，利用`got`库执行JavaScript提取动态数据，如用户讨论和市场分析。示例代码展示了爬虫的实现过程，包括浏览器实例创建、代理配置、JavaScript执行及数据打印。此方法有助于投资者及时获取市场资讯，为决策提供支持。
奔跑的数据
70 4
使用Go和JavaScript爬取股吧动态信息的完整指南
yqcoder
|
4月前
|
JavaScript 前端开发
前端 JS 经典：动态执行 JS
前端 JS 经典：动态执行 JS
yqcoder
40 0
码喽的自我修养
|
6月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
码喽的自我修养
37 1
码喽的自我修养
|
5月前
|
JavaScript
js -- 函数总结篇，函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇，函数提升、动态参数、剩余参数、箭头函数、this指向......
码喽的自我修养
66 0
1660814598353893
|
5月前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题，动态JS加载失败，请问怎么解决啊？急，急，急。
用户反馈校验时遇到错误，日志显示验证码参数获取异常。采用无痕验证，失败后，返回`{captchaResult:false,bizResult:false}`，未触发滑块二次验证。
1660814598353893
146 0
sunrr
|
6月前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式？
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式？
sunrr
88 1