用JavaScript实现动态省市县三级联动
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能:
<!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的元素的idfunction 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用来记录当前被选中的省或市的IDif(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标签中添加对应的城市IDvar 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标签中添加对应的县区IDvar 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" οnchange="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" οnchange="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>
测试结果如下:
未做任何选择时:
选择时:
当然,省市县三者都是动态联动的,只要顶级的内容发生改变,所有子级的内容也会发生改变或被重置为City或Country.
用JavaScript实现动态省市县三级联动相关推荐
- java省市县联动 下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做 ...
- JavaScript省市县三级联动-含源代码
目录 一.省市县三级联动 1.实现思路 2.实现步骤 二.源代码管理 1.HTML显示页面 2.JavaScript核心代码 3.省市县三级地址 一.省市县三级联动 1.实现思路 1.创建省市县三级地 ...
- JavaScript 省市县三级联动
JavaScript 省市县三级联动 2010-03-16 效果演示 省市联动出生地:--请选择省份-- 北京市天津市河北省 山西省内蒙古自治区辽宁省 吉林省黑龙江省上海市 江苏省浙江省安徽省 福建省 ...
- mysql 省市县三级联动查询_PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果...
连接数据库:db.php $dbhost="localhost"; $dbpassword="123"; $dbuser ='root';//数据库用户名 $d ...
- 省市县三级联动插件(面向过程,面向对象两种方式实现)
<div class="city_select"><select id="province"><option value=&quo ...
- jQueryDay04:distpicker省市县三级联动, Layer插件,Laydate插件
目录 0x00 distpicker省市县三级联动 如何设置默认值: 如何获取提交的数据: 后台数据回显: 0x01 Layer插件 0x02 Laydate插件 0x00 distpicker省市县 ...
- jquery省市县三级联动
Jquery省市县三级联动,数据来源js,无需调用接口 可前往本人发布资源<Jquery省市县三级>免积分下载 目录 效果 html部分 <!DOCTYPE html> < ...
- mysql 省市县三级联动查询_省市县三级联动的SQL语句
省市县三级联动的SQL语句 无 CREATE TABLE `t_address_province` (`id` INT AUTO_INCREMENT PRIMARY KEY COMMENT '主键', ...
- 【MySQL】全国省市县三级联动SQL语句—区县SQL(三)
目录 ->区县信息表数据 [MySQL]全国省市县三级联动SQL语句-建表和省份SQL(一)_路遥叶子的博客-CSDN博客全国省市县三级联动SQL语句-建表和省份SQL(一)https://bl ...
最新文章
- 9 个技巧让你的 PyTorch 模型训练变得飞快!
- Server 2012 Hyper-v新功能之一:客户端 Hyper-V
- 声网sdk android接入,Android 集成声网Agora 音视频实时通话(三)
- 【Android 插件化】插件化技术弊端 ( 恶意插件化程序的解决方向 | 常用的插件化虚拟引擎 )
- 学习Apache Camel –实时索引推文
- Makefile(三)
- BERT: Bidirectional Encoder Representations from Transformers双向Transformer用于语言模型 NAACL 2018
- pytorch nn.Conv1d
- CSS 基础入门语法
- 华中科技大学标准c语言程序设计上机试题,答案及报告格式,华中科技大学标准C语言程序设计上机试题、答案及报告格式.pdf...
- python列表字典元祖_python列表,字典,元组常用方法和集合
- 今日收获:图片数据的存和取示例
- Asp.Net Web API 2第十四课——Content Negotiation(内容协商)
- java IDEA 手动替换更新jar包
- Oracle USE_LARGE_PAGES初始化参数
- 软件测试管理的基本要素
- 微信小程序开发之——WeUI快速上手
- 概率论考点之检验统计量(区间估计)
- 电信光猫 DDNS路由设置-基于DNSPOD
- Typo Forum