select下拉選單二級聯動

admin發表於2017-04-04

二級聯動效果大家可能都比較熟悉，比如省市二級聯動效果。

從它的使用頻度就可以看出它的重要性，下面就通過程式碼例項詳細介紹一下它的實現過程。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var province = document.getElementById("province");
  var city = document.getElementById("city");
  var area = [['朝陽','海淀'],['杭州','海寧']];
  function choose(){
    var opt = "";
    if(province.value==undefined){
      province.value=0;
    }
    var len = area[province.value];  
    for(var index = 0;index < len.length; index++){ 
      opt = opt + '<option value ="'+ index +'">  '+ len[index]+ '</option>'
    }
    city.innerHTML = opt;
  }
  province.onchange = function(){
    choose();
  }
  choose();
}
</script>
</head>
<body>
<select id="province">
  <option value="0">北京</option>
  <option value="1">浙江</option>
</select>
<select id="city">
</select>
</body>
</html>

上面的程式碼實現了聯動效果，只是做了精簡而已，下面就介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.var province = document.getElementById("province")，獲取省份select下拉選單。

（3）.var city = document.getElementById("city")，獲取城市select下拉選單。

（4）.var area = [['朝陽','海淀'],['杭州','海寧']]，一個模擬的二維陣列，存放的是城市或者區。

（5）.function choose(){}，作為onchange事件處理函式。

（6）.var opt = ""，此變數用來儲存option項相關字串。

（7）.if(province.value==undefined){

  province.value=0;

}，如果屬性值等於undefined，也就是在預設狀態會顯示第一個子陣列中城市或者區。

（8）.var len = area[province.value]，顯示指定的子陣列，城市select下拉選單的value值是和陣列中子陣列城市索引關聯。

（9）.for(var index = 0;index < len.length; index++){

  opt = opt + '<option value ="'+ index +'">  '+ len[index]+ '</option>'

}，遍歷子陣列中的每一個城市或者區，連線成option字串。

（10）.city.innerHTML = opt，設定option項。

（11）.province.onchange = function(){

  choose();

}，註冊onchange事件處理函式。

（12）.choose()，為了顯示預設省份和城市或者區。

二.相關閱讀:

（1）.二維陣列可以參閱javascript如何實現二維陣列一章節。

（2）.onchange事件可以參閱javascript change事件一章節。

（3）.innerHTML屬性可以參閱js innerHTML一章節。

相關文章