JavaScript省市級聯選單原理詳解

antzone發表於2018-02-22
JavaScript

級聯選單效果在和很多應用中都有使用，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
var cities=[["安慶","合肥","桐城"],["石家莊","保定","唐山"],["鄭州","洛陽","開封"]]; 
function provinceChanged(sel){ 
  for(var x=0;x<sel.options.length;x++){ 
    var opt=sel.options[x]; 
    if(opt.selected){ 
      addCityToSelect(x) 
    } 
  } 
} 
function addCityToSelect(x){ 
  var city=cities[x-1]; 
  var citySelect=document.getElementById("select_city"); 
  citySelect.options.length=1; 
  for(var x=0;x<city.length;x++){ 
    var optionName=document.createElement("option"); 
    optionName.innerHTML=city[x]; 
    citySelect.appendChild(optionName); 
  } 
} 
window.onload=function(){
  var pro=document.getElementById("pro");
  pro.onchange=function(){
    provinceChanged(this);
  }
}
</script> 
</head> 
<body> 
<select id="pro"> 
  <option>請選擇省份</option> 
  <option>安徽</option> 
  <option>河北</option> 
  <option>河南</option> 
</select> 
<select id="select_city"> 
  <option>請選擇城市</option> 
</select> 
</body> 
</html>

以上程式碼實現了我們的要求，下面就簡單介紹一下它的實現過程。

一.程式碼註釋：

（1）.var cities=[["安慶","合肥","桐城"],["石家莊","保定","唐山"],["鄭州","洛陽","開封"]]，宣告一個陣列，模擬實現了二維陣列功能，每一個子陣列儲存是城市名稱。

（2）.function provinceChanged(sel){}，此函式用來獲取選中option項的索引，並將此索引值傳遞給addCityToSelect()函式。函式的引數為省份select下拉選單物件。

（3）.for(var x=0;x<sel.options.length;x++){}，遍歷省份select下拉選單的所有option項。

（4）.var opt=sel.options[x]，獲取當前option項物件。

（5）.if(opt.selected){addCityToSelect(x)}，如果當前項被選中，那麼就將此項的索引傳遞給函式addCityToSelect()。

（6）.function addCityToSelect(x){}，此函式接收選中省份的option索引值。它可以生成對應省份的城市下拉選單。

（7）.var city=cities[x-1]，獲取陣列中的對應城市陣列，之所以減一是因為省份的下拉選單第一個option項並不是省份。

（8）.var citySelect=document.getElementById("select_city")，獲取城市select下拉選單物件。

（9）.citySelect.options.length=1，設定select下拉選單長度為1，很重要，否則在切換省份的時候，城市下拉選單內容是追加效果。

（10）.for(var x=0;x<city.length;x++){}，遍歷對應城市子陣列的每一個項。

（11）.var optionName=document.createElement("option")，建立一個option項。

（12）.optionName.innerHTML=city[x]，設定option項的文字內容為城市名稱。

（13）.citySelect.appendChild(optionName)，將option項新增到select下拉選單。

二.相關閱讀：

（1）.options參閱javascript select.options一章節。

（2）.document.createElement()參閱js createElement()一章節。 

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

（4）.onchange事件參閱javascript select change 事件一章節。

相關文章