JavaScript 省市級聯選單原理

antzone發表於2019-05-18

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

程式碼如下:

[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()參閱JavaScript createElement()一章節。 

(3).innerHTML屬性參閱JavaScript innerHTML一章節。 

(4).onchange事件參閱JavaScript select change 事件一章節。

相關文章