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

2019-11-20 11:07:51

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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的元素的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("<option>City</option>");   $("#country").empty();   $("#country").append("<option>Country</option>");   //上面的两次清空与两次添加是为了保持级联的一致性   var province_dict = Place_dict[Province_Selected_Id]; //获得一个省的字典   for(city in province_dict){  //取得省的字典中的城市    //添加内容的同时在option标签中添加对应的城市ID    var 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标签中添加对应的县区ID    var 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>

如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

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

上一篇：Bootstrap每天必学之进度条

下一篇：jQuery插件EasyUI校验规则 validatebox验证框