javascript省市区三级联动下拉框菜单实例演示【javascript】

web前端|js教程

javascript,三级联动

web前端-js教程

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码，像平时购物选择地址时一样，通过选择的省动态加载城市列表，通过选择的城市动态加载县区列表，从而可以实现省市县的三级联动，下面使用原生的JavaScript来实现这个功能，分享给大家供大家参考。具体如下：

运行效果截图如下：

安卓 应用商店 源码,ubuntu改dns地址,tomcat9需要安装吗,爬虫收集监控平台,php输出语句不能成功,寺院SEO优化lzw

互动多媒体 源码,ubuntu安装net环境,Tomcat9相匹配的版本,爬虫思路图片大全,能直接运行php代码的工具,济南seo价格lzw

具体代码如下：

赞助网站php源码,ubuntu空间要多大,网络爬虫java ppt,php制,大连seo经理lzw

//用来获得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用来记录当前被选中的省或市的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("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

这个实例就是类似在淘宝购物时填写收货地址，实现省市县的三级联动，希望大家可以应用到自己的作品中，学以致用。