像平時(shí)購(gòu)物選擇地址時(shí)一樣，通過(guò)選擇的省動(dòng)態(tài)加載城市列表，通過(guò)選擇的城市動(dòng)態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，下面使用原生的JavaScript來(lái)實(shí)現(xiàn)這個(gè)功能：
先給大家展示下測(cè)試結(jié)果：
未做任何選擇時(shí)：
選擇時(shí)：
代碼如下所示：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>三級(jí)聯(lián)動(dòng)測(cè)試</title><script src="jquery-2.1.4.min.js"></script><script type="text/javascript">//用來(lái)獲得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}//改變下一個(gè)級(jí)聯(lián)的option元素的內(nèi)容，即加載市或縣function Get_Next_Place(This_Place_ID,Action){var Selected_Id = Get_Selected_Id(This_Place_ID); //Selected_Id用來(lái)記錄當(dāng)前被選中的省或市的IDif(Action=='Get_city') //從而可以在下一個(gè)級(jí)聯(lián)中加載相應(yīng)的市或縣Add_city(Selected_Id);else if(Action=='Get_country')Add_country(Selected_Id);}//用來(lái)存儲(chǔ)省市區(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"]}};//加載城市選項(xiàng)function Add_city(Province_Selected_Id){$("#city").empty();$("#city").append("<option>City</option>");$("#country").empty();$("#country").append("<option>Country</option>");//上面的兩次清空與兩次添加是為了保持級(jí)聯(lián)的一致性var province_dict = Place_dict[Province_Selected_Id]; //獲得一個(gè)省的字典for(city in province_dict){ //取得省的字典中的城市//添加內(nèi)容的同時(shí)在option標(biāo)簽中添加對(duì)應(yīng)的城市IDvar text = "<option"+" id='"+city+"'>"+city+"</option>";$("#city").append(text);console.log(text); //用來(lái)觀察生成的text數(shù)據(jù)}}//加載縣區(qū)選項(xiàng)function Add_country(City_Selected_Id){$("#country").empty();$("#country").append("<option>Country</option>");//上面的清空與添加是為了保持級(jí)聯(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)容的同時(shí)在option標(biāo)簽中添加對(duì)應(yīng)的縣區(qū)IDvar text = "<option"+" id=/'"+country_list[index]+"/'>"+country_list[index]+"</option>";$("#country").append(text);console.log(text); //用來(lái)觀察生成的text數(shù)據(jù)}}</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>當(dāng)然，省市縣三者都是動(dòng)態(tài)聯(lián)動(dòng)的，只要頂級(jí)的內(nèi)容發(fā)生改變，所有子級(jí)的內(nèi)容也會(huì)發(fā)生改變或被重置為City或Country.
以上所述是小編給大家分享的原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼，希望對(duì)大家有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
