select下拉選單級聯效果例項程式碼

antzone發表於2017-03-15
原文網址 : https://www.softwhy.com/article-3390-1.html

級聯下拉選單在網頁製作中使用非常的廣泛，例如省市縣級聯熊級聯效果，還是出生年月日級聯效果，非常的人性化，省去使用者很多麻煩，下面就通過一段程式碼例項簡單介紹一下如何實現此效果。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var groups=document.myform.domain.options.length 
  var group=new Array(groups) 
  for(i=0;i<groups;i++) {
    group[i] = new Array()
  }
  //江岸 
group[1][0]=new Option('不限','0'); 
  group[1][1]=new Option('堤角諶家磯','17'); 
  group[1][2]=new Option('二七','18'); 
  group[1][3]=new Option('後湖','19'); 
  group[1][4]=new Option('蔡家田花橋','20'); 
  group[1][5]=new Option('永清黃浦','21'); 
  group[1][6]=new Option('三陽路','22'); 
  group[1][7]=new Option('臺北路香港路','23'); 
  group[1][8]=new Option('江漢路大智路','24'); 
  group[1][9]=new Option('其他','25'); 
  //江漢 
  group[2][0]=new Option('不限','0'); 
  group[2][1]=new Option('楊汊湖','26'); 
  group[2][2]=new Option('復興村常青','27'); 
  group[2][3]=new Option('唐家墩','28'); 
  group[2][4]=new Option('王家墩CBD','29'); 
  group[2][5]=new Option('西北湖','30'); 
  group[2][6]=new Option('武廣萬鬆園','31'); 
  group[2][7]=new Option('前進花樓','32'); 
  group[2][8]=new Option('其他','33'); 
  //橋口 
  group[3][0]=new Option('不限','0'); 
  group[3][1]=new Option('武勝路','34'); 
  group[3][2]=new Option('寶丰','35'); 
  group[3][3]=new Option('宗關','36'); 
  group[3][4]=new Option('漢西','37'); 
  group[3][5]=new Option('古田','38'); 
  group[3][6]=new Option('其他','39'); 
  //東西湖 
  group[4][0] = new Option('不限', '0'); 
  group[4][1] = new Option('常青花園', '40'); 
  group[4][2] = new Option('金銀湖', '41'); 
  group[4][3] = new Option('吳家山', '42'); 
  group[4][4] = new Option('金銀潭將軍路', '43'); 
  group[4][5] = new Option('其他', '44'); 
  //漢陽 
  group[5][0] = new Option('不限', '0'); 
  group[5][1] = new Option('鸚鵡大道鍾家村', '52'); 
  group[5][2] = new Option('王家灣七裡廟', '53'); 
  group[5][3] = new Option('四新', '54'); 
  group[5][4] = new Option('黃金口琴斷口', '55'); 
  group[5][5] = new Option('其他', '56'); 
  //武漢經開 
  group[6][0] = new Option('不限', '0'); 
  group[6][1] = new Option('沌口片', '57'); 
  group[6][2] = new Option('其他', '58'); 
  //武昌 
  group[7][0] = new Option('不限', '0'); 
  group[7][1] = new Option('徐東', '62'); 
  group[7][2] = new Option('岳家嘴', '63'); 
  group[7][3] = new Option('水果湖', '64'); 
  group[7][4] = new Option('積玉橋', '65'); 
  group[7][5] = new Option('中南丁字橋', '66'); 
  group[7][6] = new Option('小東門', '67'); 
  group[7][7] = new Option('司門口', '68'); 
  group[7][8] = new Option('閱馬場首義', '69'); 
  group[7][9] = new Option('武泰閘', '70'); 
  group[7][10] = new Option('南湖花園', '71'); 
  group[7][11] = new Option('其他', '72'); 
  //青山 
  group[8][0] = new Option('不限', '0'); 
  group[8][1] = new Option('建二', '73'); 
  group[8][2] = new Option('紅鋼城', '74'); 
  group[8][3] = new Option('其他', '75'); 
  //洪山 
  group[9][0] = new Option('不限', '0'); 
  group[9][1] = new Option('珞獅街道口', '76'); 
  group[9][2] = new Option('卓刀泉虎泉', '77'); 
  group[9][3] = new Option('南湖', '78'); 
  group[9][4] = new Option('白沙洲', '79'); 
  group[9][5] = new Option('黃家湖', '80'); 
  group[9][6] = new Option('楊春湖', '81'); 
  group[9][7] = new Option('其他', '82'); 
  //東湖高新 
  group[10][0] = new Option('不限', '0'); 
  group[10][1] = new Option('魯巷', '88'); 
  group[10][2] = new Option('關山', '89'); 
  group[10][3] = new Option('大學科技園', '90'); 
  group[10][4] = new Option('藏龍島', '91'); 
  group[10][5] = new Option('花山', '92'); 
  group[10][6] = new Option('其他', '93'); 
  //江夏 
  group[11][0] = new Option('不限', '0'); 
  group[11][1] = new Option('流芳', '83'); 
  group[11][2] = new Option('紙坊', '84'); 
  group[11][3] = new Option('廟山', '85'); 
  group[11][4] = new Option('大橋', '86'); 
  group[11][5] = new Option('其他', '87'); 
  //黃陂 
  group[12][0] = new Option('不限', '0'); 
  group[12][1] = new Option('前川', '45'); 
  group[12][2] = new Option('盤龍城', '46'); 
  group[12][3] = new Option('武湖', '47'); 
  group[12][4] = new Option('其他', '48'); 
  //新洲 
  group[13][0] = new Option('不限', '0'); 
  group[13][1] = new Option('新洲城區', '49'); 
  group[13][2] = new Option('陽邏', '50'); 
  group[13][3] = new Option('其他', '51'); 
  //蔡甸 
  group[14][0] = new Option('不限', '0'); 
  group[14][1] = new Option('蔡甸', '59'); 
  group[14][2] = new Option('其他', '60'); 
  //漢南 
  group[15][0] = new Option('漢南', '61'); 
  //其他 
  group[16][0] = new Option('其他區域', '94'); 
  var temp=document.myform.pian 
  function redirect(x) { 
    for(m=temp.options.length-1;m>0;m--) {
      temp.options[m]=null 
    }
    for(i=0;i<group[x].length;i++) { 
      temp.options[i]=new Option(group[x][i].text,group[x][i].value) 
    } 
    temp.options[0].selected=true 
  } 
   
  document.myform.domain.onchange=function(){
    redirect(this.options.selectedIndex)
  } 
}
</script>
</head>
<body>
<FORM name="myform" id="myform" action="" method="post">
  <tr>
    <td>
      <select id="domainNewHouse" name="domain">
        <option value="0" selected>區域</option>
        <option value="1">江岸區</option>
        <option value="2">江漢區</option>
        <option value="3">礄口區</option>
        <option value="4">東西湖區</option>
        <option value="7">漢陽區</option>
        <option value="8">武漢經開</option>
        <option value="11">武昌區</option>
        <option value="12">青山區</option>
        <option value="13">洪山區</option>
        <option value="15">東湖高新區</option>
        <option value="14">江夏區</option>
        <option value="5">黃陂區</option>
        <option value="6">新洲區</option>
        <option value="9">蔡甸區</option>
        <option value="10">漢南區</option>
        <option value="16">其他</option>
      </select>
    </td>
    <td>
      <select name="pian" id="pianqu" style="width:80px;">
        <option value="" selected>片區</option>
      </select>
    </td>
  </tr>
</form>
</body>
</html>

以上程式碼實現了我們想要的功能，選擇第一個select下拉選單，第二個會實現聯動效果，下面介紹一下實現過程。

一.實現原理:

程式碼看著很長其實原理非常的簡單，就是將每一個一級地區下的所有二級地區作為一個陣列，然後再將這樣的陣列作為一個length屬性值為一級地區個數的陣列（在此程式碼中是group）的元素，這樣一級地區就和二級地區建立了聯絡。當選擇第一個select下拉選單的時候就會觸發onchange事件，此事件的事件處理函式會傳遞一個引數，此引數作為group陣列的索引，這樣就可以二級地區了，然後通過遍歷的方式將二級地區寫入第二個select下拉選單即可。原理大體如此，這裡就不多介紹了，自己可以深入體會一下。

相關文章