快捷導(dǎo)航

JavaScript實(shí)現(xiàn)三級聯(lián)動(dòng)效果

更新時(shí)間：2017年07月15日 08:36:38 作者：梵海pp

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)三級聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

三級聯(lián)動(dòng)：就是平時(shí)網(wǎng)頁上需要選擇的省市縣對應(yīng)位置的下拉欄模塊，當(dāng)選擇好省位置后市的下拉欄更新為已選省的，縣類似。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>三級聯(lián)動(dòng)</title>
</head>
<body>
<select id="sheng">
  <option value="">-請選擇-</option><!--先創(chuàng)建三個(gè)下拉欄，分別對應(yīng) 省 市 縣-->
</select>

<select id="shi">
  <option value="">-請選擇-</option>
</select>

<select id="xian">
  <option value="">-請選擇-</option>
</select>
<script>
  var osheng=document.getElementById("sheng");
  var oshi=document.getElementById("shi");
  var oxian=document.getElementById("xian");

  var arr_sheng=["陜西省","云南省","四川省","山西省"];<!--創(chuàng)建一個(gè)一維數(shù)組，存入省的值-->

  var arr_shi=[<!--創(chuàng)建一個(gè)二維數(shù)組，最外層每一個(gè)元素對應(yīng)省-->
    ["西安市","咸陽市","寶雞市","渭南市"],<!--數(shù)組中的第一個(gè)元素內(nèi)又定義一個(gè)數(shù)組存的市的值-->
    ["昆明市","大理市","麗江市","西雙版納市"],
    ["樂山市","成都市","大同市","高新市"],
    ["太原市","屏顯市","樂寶市","李偉市"]
  ];

  var arr_xian=[<!--創(chuàng)建一個(gè)三維數(shù)組，最外層每一個(gè)元素（對應(yīng)?。?->
      [<!--數(shù)組中定義四個(gè)數(shù)組（對應(yīng)市）-->
        ["西安縣1","西安縣2"],["咸陽市1","咸陽市2"],["寶雞市1","寶雞市2"],["渭南市1","渭南市2"]
      ],<!--數(shù)組中定義兩個(gè)元素（對應(yīng)縣）-->
      [
        ["昆明市1","昆明市2"],["大理市1","大理市2"],["麗江市1","麗江市2"],["西雙版納市1","西雙版納市2"]
      ],
      [
        ["樂山市1","樂山市2"],["成都市1","成都市2"],["大同市1","大同市2"],["高新市1","高新市2"]
      ],
      [
        ["太原市1","太原市2"],["屏顯市1","屏顯市2"],["樂寶市1","樂寶市2"],["李偉市1","李偉市2"]
      ]
  ];

  var quanju_arr;//創(chuàng)建一個(gè)全局對象，用于存儲(chǔ)一個(gè)中間數(shù)組

  function input_arr(arr,event){//封裝一個(gè)函數(shù)，用于向下拉欄中添加元素
    for(var i=0;i<arr.length;i++){//下拉欄內(nèi)的元素來源于數(shù)組中的元素，遍歷數(shù)組
      var option=new Option(arr[i],i);//創(chuàng)建Option對象（這個(gè)O要大寫），存入值
      event.appendChild(option);//把option添加到event對象的末尾
    }
  }

  input_arr(arr_sheng,osheng);//調(diào)用,給省下拉欄添元素

  osheng.onchange= function () {//給下拉欄綁定事件（當(dāng)下拉欄元素改變時(shí)執(zhí)行）
    oshi.options.length=1;//當(dāng)省下拉欄改變時(shí)，清空市的下拉欄內(nèi)元素
    oxian.options.length=1;//當(dāng)省下拉欄改變時(shí)，清空縣的下拉欄內(nèi)元素
    var index=this.value;//每一個(gè)option標(biāo)簽都有一個(gè)value值索引，獲取索引，用于數(shù)組中元素的選擇
    var arr_shi_next=arr_shi[index];//獲取當(dāng)前選擇省的市元素并賦給一個(gè)數(shù)組
    quanju_arr=arr_xian[index];//獲取當(dāng)前選擇省中市的縣元素并賦給定義的中間數(shù)組
    input_arr(arr_shi_next,oshi);//調(diào)用,給市下拉欄添元素
  }

  oshi.onchange= function () {
    oxian.options.length=1;
    var index=this.value;
    var arr_xian_next=quanju_arr[index];
    input_arr(arr_xian_next,oxian);//調(diào)用,給縣下拉欄添元素
  }
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: