java省市县联动 下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的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("City");
$("#country").empty();
$("#country").append("Country");
//上面的两次清空与两次添加是为了保持级联的一致性
var province_dict = Place_dict[Province_Selected_Id]; //获得一个省的字典
for(city in province_dict){ //取得省的字典中的城市
//添加内容的同时在option标签中添加对应的城市ID
var text = ""+city+"";
$("#city").append(text);
console.log(text); //用来观察生成的text数据
}
}
//加载县区选项
function Add_country(City_Selected_Id){
$("#country").empty();
$("#country").append("Country");
//上面的清空与添加是为了保持级联的一致性
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 = ""+country_list[index]+"";
$("#country").append(text);
console.log(text); //用来观察生成的text数据
}
}
您的收货地址:
Province
GuangDong
ShanDong
HuNan
City
Country
当然,省市县三者都是动态联动的,只要顶级的内容发生改变,所有子级的内容也会发生改变或被重置为City或Country.
以上所述是小编给大家分享的原生JavaScript实现动态省市县三级联动下拉框菜单实例代码,希望对大家有所帮助。
java省市县联动 下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...相关推荐
- 简单下拉菜单html,JavaScript简单下拉菜单实例代码
本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最 ...
- 开源三级联动,Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式 上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用 文件的目录路径为: data.js是存放我 ...
- java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
- java 微信自定义菜单开发_微信公众号开发之设置自定义菜单实例代码【java版】...
本实例是为了实现在管理后台实现微信菜单的添加删除管理. 1.首先我们需要新建一个数据库表用于存放menu菜单项 可包含的字段有id.父类id.name.排序.是否显示.类型(view.click).链 ...
- python selenium 下拉框选择_【selenium】基于python语言,如何用select选择下拉框
在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...
- 用JavaScript实现动态省市县三级联动
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: <!DOCTYPE ht ...
- 请使用复选框选择_使用可选是可选的
请使用复选框选择 在上周"收藏中的可选内容"的文章发表之后,我不禁要多讲一些关于同一只野兽的事情. 更多细节. 最初由Google Guava引入并后来包含在Java 8软件包中的 ...
- 省份城市区县三级联动html代码,JavaScript实现省份城市的三级联动
本文实例为大家分享了js实现省份城市的三级联动的具体代码,供大家参考,具体内容如下 效果图: Document select{ width: 80px; margin: 5px; } // 省份数组 ...
- java怎么接收多选框多数据_表id关联数据获取至页面,制作下拉框多选进行数据多项获取(字段处理)...
python数据处理基础知识完成获取 72元 (需用券) 去购买 > 这周完成了一张表单,重点碰到以下问题: 1.freemaker获取年份的type值取year,类型直接为Long,传至后台和 ...
最新文章
- QEMU — 编译安装指定的版本
- stm32F105的can2问题
- JPEG压缩matlab实现
- Linux系统(四)LVS集群负载均衡NAT模式
- 项目经理人必须要遵循的14个成功原则
- java设计模式建造_java设计模式-建造者模式
- php购物车修改单价,php – woocommerce在结帐和购物车页面更改价格
- 表格数字乘以百分比怎么算_Excel输入多位数字之后有了“E”,用文本格式一步到位,恢复原状...
- 物联网全面崛起 LED企业大有可为
- Quartz和OpenGL绘图基本概念
- dreamweaver代码提示失效
- jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示
- WPF XMAL获取元素的父元素,子元素
- 基于二分查询树(BinarySearchTrees)实现的键值对表(symbole-table)
- [Code+#1]大吉大利,晚上吃鸡!
- 4.7开发者日:创业工场麦刚认为创业者活下去最重要
- p坚持csma协议 仿真‘_签了“三方协议”,还算应届毕业生吗!?
- linux添加java环境变量
- JMeter jp@gc - stepping thread group插件
- 软文营销是什么,怎么理解