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

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

具体代码如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题三级联动测试/title脚本src=' http : jquery-2。1 .4 .量滴js /脚本脚本类型='text/javascript' //用来获得选择权元素中挑选属性为真实的的元素的编号函数获取_选定_标识(地点){ var pro=文档。getelementbyid(地点);var Selected _ Id=pro。选项[专业版。selectedindex].id；返回选定的标识；//返回挑选属性为真实的的元素的id } //改变下一个级联的选择权元素的内容，即加载市或县函数Get_Next_Place(This_Place_ID，Action){ var Selected _ ID=Get _ Selected _ ID(This _ Place _ ID)；//选定_标识用来记录当前被选中的省或市的标识如果(操作=='Get_city') //从而可以在下一个级联中加载相应的市或县添加城市（已选标识);else if(Action==' Get _ country ')Add _ country(select _ Id)；} //用来存储省市区的数据结构var Place_dict={ '广东' :{ '广州' :['番禺','黄埔','天河'],'清远' :['清城','英德','连山'],'佛山' :['南海','顺德','三水'] },'山东' :{ '济南' :['历下','师中','天桥','青岛' :['市南','黄岛','胶州'//加载城市选项函数Add_city(省份_选定_Id){ $('#city ').empty()；$('#city ').追加(“选项城市/选项”)；$(“# country”).empty()；$(“# country”).追加(“选项国家/选项”)；//上面的两次清空与两次添加是为了保持级联的一致性定义变量省份_字典=地点_字典[省份_选定_ Id]；//获得一个省的字典用于(省内城市_dict){ //取得省的字典中的城市//添加内容的同时在选择权标签中添加对应的城市ID var text=' option ' ' ID=' city ' ' ' city '/option '；$('#city ').追加（文本);console.log(文本);//用来观察生成的文本数据} } //加载县区选项函数add _ country(City _ Selected _ Id){ $(' # country ').empty()；$(“# country”).追加(“选项国家/选项”)；//上面的清空与添加是为了保持级联的一致性定义变量省份_选定_标识=获取_选定_ ID('省份');//获得被选中省的身份证，从而方便在字典中加载数据var国家_列表=地点_字典[省份_选定_ ID][城市_选定_ ID]；//获得城市列表用于(国家列表)中的索引){ ////添加内容的同时在选择权标签中添加对应的县区ID var text=' option ' ' ID=\ ' country _ list[index]' \ ' country _ list[index]'/option '；$(“# country”).追加（文本);console.log(文本);//用来观察生成的文本数据} }/脚本/流浆池p您的收货地址：/p选择id='省份onchange='Get_Next_Place '(省，' Get_city ')选项id='Not_data1 '省份/选项选项id='广东'值='广东'广东/选项id='山东'值='山东'山东/选项id='湖南'值='湖南'湖南/选项/select id='城市onchange='Get_Next_Place '(城市，' Get_country ')选项id='Not_data2 '城市/选项/select select id='如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

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