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

先给大家展示下测试结果：

未做任何选择时：

选择时：

代码如下所示：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题三级联动测试/title脚本src=' http : jquery-2。1 .4 .量滴js '/script脚本类型=' text/JavaScript '//用来获得选择权元素中挑选属性为真实的的元素的idfunction Get_Selected_Id(地点){ 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)；//选定_标识用来记录当前被选中的省或市的IDif(Action=='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){ //取得省的字典中的城市//添加内容的同时在选择权标签中添加对应的城市IDvar text=' option ' ' id=' city ' ' ' city '/option '；$('#city ').追加（文本);console.log(文本);//用来观察生成的文本数据}}//加载县区选项函数add _ country(City _ Selected _ Id){ $(' # country ').empty()；$(“# country”).追加(“选项国家/选项”)；//上面的清空与添加是为了保持级联的一致性定义变量省份_选定_标识=获取_选定_ ID('省份');//获得被选中省的身份证，从而方便在字典中加载数据var国家_列表=地点_字典[省份_选定_ ID][城市_选定_ ID]；//获得城市列表用于(国家列表)中的索引){////添加内容的同时在选择权标签中添加对应的县区IDvar text=' option ' ' id= ' ' country _ list[index]' ' ' country _ list[index]'/option '；$(“# country”).追加（文本);console.log(文本);//用来观察生成的文本数据} }/脚本/head dyp您的收货地址：/p选择id='省份onchange='Get_Next_Place '('省份，' Get_city ')选项id='Not_data1 '省份/选项选项id='广东'值='广东'广东/选项选项id='山东'值='山东'山东/选项选项id='湖南'值='湖南'湖南/选项/选择选择id='城市onchange='Get_Next_Place '('城市，' Get_country ')选项id='Not_data2 '城市/选项/选择选择编号当然，省市县三者都是动态联动的，只要顶级的内容发生改变，所有子级的内容也会发生改变或被重置为城市或国家。

以上所述是小编给大家分享的原生Java脚本语言实现动态省市县三级联动下拉框菜单实例代码，希望对大家有所帮助。