像平時購物選擇地址時一樣,透過選擇的省動態加載城市列表,透過選擇的城市動態加載縣區列表,從而可以實現省市縣的三級聯動,下面使用原生的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>
當然,省市縣三者都是動態連動的,只要頂級的內容改變,所有子層級的內容也會改變或被重置為City或Country.
以上所述是小編給大家分享的原生JavaScript實作動態省市縣三級連動下拉框選單實例程式碼,希望對大家有幫助。