快捷導(dǎo)航

javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示

更新時(shí)間：2021年09月23日 14:49:08 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單很詳細(xì)的代碼，解決了大家實(shí)現(xiàn)javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單的問(wèn)題，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單代碼，像平時(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è)功能，分享給大家供大家參考。具體如下：

運(yùn)行效果截圖如下：

具體代碼如下：

<!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的元素的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
  }
  //改變下一個(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)前被選中的省或市的ID
   if(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)的城市ID
    var 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ū)ID
    var 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>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

這個(gè)實(shí)例就是類(lèi)似在淘寶購(gòu)物時(shí)填寫(xiě)收貨地址，實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，希望大家可以應(yīng)用到自己的作品中，學(xué)以致用。

您可能感興趣的文章: