select級聯下拉選單程式碼例項分析

antzone發表於2017-03-26

級聯下拉選單的應用非常的廣泛，最為典型的就是省市級聯下拉選單，非常的方便使用，下面將分析一段級聯選單的程式碼例項，希望能夠對需要者帶來幫助，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>關聯select下拉選單程式碼例項-螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){
  var example=document.doublecombo.example;
  example.onchange=function(){
    redirect(this.options.selectedIndex);
  }
   
  var groups=example.options.length;
  var group=new Array(groups) 
  for(i=0;i<groups;i++) {
    group[i]=new Array()
  }
   
  group[0][0]=new Option("滑鼠類","http://www.softwhy.com"); 
  group[0][1]=new Option("視窗類","http://www.softwhy.com"); 
  group[0][2]=new Option("導航類","http://www.softwhy.com"); 
  group[1][0]=new Option("ASP","http://www.softwhy.com"); 
  group[1][1]=new Option("PHP","http://www.softwhy.com"); 
  group[1][2]=new Option("JSP","http://www.softwhy.com"); 
  group[2][0]=new Option("Dreamweaver","http://www.softwhy.com");
  group[2][1]=new Option("Fireworks","http://www.softwhy.com"); 
  group[2][2]=new Option("Flash","http://www.softwhy.com"); 
  group[2][3]=new Option("Photoshop","http://www.softwhy.com");
   
   
  var temp=document.doublecombo.stage2 
  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
  } 
   
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    go()
  }
   
  function go(){ 
    location.href=temp.options[temp.selectedIndex].value 
  } 
}
</script>
</head> 
<body> 
<form name="doublecombo"> 
  <select name="example" size="1"> 
   <option>特效程式碼</option> 
   <option>網頁語言</option> 
   <option>軟體教程</option> 
  </select> 
  <select name="stage2" size="1"> 
   <option value="http://www.softwhy.com">滑鼠類</option> 
   <option value="http://www.softwhy.com">視窗類</option> 
   <option value="http://www.softwhy.com">導航類</option> 
  </select> 
  <input type="button" name="test" value="跳轉" id="bt"> 
</form> 
</body> 
</html>

以上程式碼實現了兩個select下拉選單的級聯效果，下面介紹一下實現過程。

一.實現原理:

原理其實比較簡單，計算出第一個select下拉選單中option的數量（假定有N個），然後建立一個長度為N的陣列，這個陣列的每一項都是一個陣列，然後將第二個select下拉選單的項根據分類分別儲存於作為陣列元素的陣列中。當選擇第一個下拉選單的項時，能夠將當前選中項的索引傳遞給函式redirect()，此函式可以便利傳過來對應索引下陣列元素的項，並將各項重新設定為第二個select下拉選單的項，這樣就實現了級聯效果。

二.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢後再去執行函式中的程式碼。

2.var example=document.doublecombo.example，獲取第一個select下拉選單物件。

3.example.onchange=function(){}，為第一個select下拉選單註冊onchange事件處理函式。

4.redirect(this.options.selectedIndex)，呼叫redirect()函式，引數為當前備選項的索引值。

5.var groups=example.options.length，獲取第一個下拉選單項的長度。

6.var group=new Array(groups)，建立一個長度為groups的陣列。

7.for(i=0;i<groups;i++){}，初始化建立的陣列group，每一個陣列項的值是一個陣列。

8.group[0][0]=new Option("滑鼠類",http://www.softwhy.com)，將group陣列第一項（是一個陣列）的第一項設定為一個Option物件。

9.var temp=document.doublecombo.stage2 ，獲取第二個select下拉選單物件。

10.function redirect(x){}，建立一個函式，引數是第一個select下拉選單選中項的索引值。

11.for(m=temp.options.length-1;m>0;m--){}，清空第二個下拉選單的所有項。

12.for(i=0;i<group[x].length;i++){}，將第二個下拉選單的專案設定為相應傳遞過來索引項陣列中的專案。

13.temp.options[0].selected=true，將第一個下拉項設定為被選中專案。

14.var bt=document.getElementById("bt")，獲取按鈕物件。

15.bt.onclick=function()，為按鈕物件註冊點選事件處理函式。

16.go()，呼叫go()函式。

17.function go(){}，宣告一個函式go()。

18.location.href=temp.options[temp.selectedIndex].value，跳轉到第二下拉選單選中項value屬性值所指定的連結地址。

三.相關閱讀:

1.關於javascript操作select下拉選單可以參閱javascript動態操作select下拉選單一章節。

2.關於陣列可以參閱JavaScript Array物件一章節。

相關文章