生活随笔
收集整理的這篇文章主要介紹了
用JavaScript实现动态省市县三级联动
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
????像平時購物選擇地址時一樣，通過選擇的省動態(tài)加載城市列表，通過選擇的城市動態(tài)加載縣區(qū)列表，從而可以實現(xiàn)省市縣的三級聯(lián)動，下面使用原生的JavaScript來實現(xiàn)這個功能：
<!DOCTYPE?html>
<html>
<head?lang="en"><meta?charset="UTF-8"><title>三級聯(lián)動測試</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}//改變下一個級聯(lián)的option元素的內(nèi)容，即加載市或縣function?Get_Next_Place(This_Place_ID,Action){var?Selected_Id?=?Get_Selected_Id(This_Place_ID);???//Selected_Id用來記錄當(dāng)前被選中的省或市的IDif(Action=='Get_city')????????????????????????????//從而可以在下一個級聯(lián)中加載相應(yīng)的市或縣Add_city(Selected_Id);else?if(Action=='Get_country')Add_country(Selected_Id);}//用來存儲省市區(qū)的數(shù)據(jù)結(jié)構(gòu)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>");//上面的兩次清空與兩次添加是為了保持級聯(lián)的一致性var?province_dict?=?Place_dict[Province_Selected_Id];???//獲得一個省的字典for(city?in?province_dict){?????//取得省的字典中的城市//添加內(nèi)容的同時在option標(biāo)簽中添加對應(yīng)的城市IDvar?text?=?"<option"+"?id='"+city+"'>"+city+"</option>";$("#city").append(text);console.log(text);??//用來觀察生成的text數(shù)據(jù)}}//加載縣區(qū)選項function?Add_country(City_Selected_Id){$("#country").empty();$("#country").append("<option>Country</option>");//上面的清空與添加是為了保持級聯(lián)的一致性var?Province_Selected_ID?=?Get_Selected_Id("province");?????//獲得被選中省的ID，從而方便在字典中加載數(shù)據(jù)var?country_list?=?Place_dict[Province_Selected_ID][City_Selected_Id];??//獲得城市列表for(index?in?country_list){添加內(nèi)容的同時在option標(biāo)簽中添加對應(yīng)的縣區(qū)IDvar?text?=?"<option"+"?id=\'"+country_list[index]+"\'>"+country_list[index]+"</option>";$("#country").append(text);console.log(text);??//用來觀察生成的text數(shù)據(jù)}}</script>
</head>
<body><p>您的收貨地址：</p><select?id="province"?οnchange="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"?οnchange="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>
????測試結(jié)果如下：
未做任何選擇時：
選擇時：
????當(dāng)然，省市縣三者都是動態(tài)聯(lián)動的，只要頂級的內(nèi)容發(fā)生改變，所有子級的內(nèi)容也會發(fā)生改變或被重置為City或Country.
總結(jié)
以上是生活随笔為你收集整理的用JavaScript实现动态省市县三级联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
