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

本文实例讲述了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" onchange="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" onchange="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>

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