獲取select下拉選單預設選中項的索引

螞蟻小編發表於2017-03-26
索引

本章節介紹一下如何獲取select下拉選單預設選中項的索引，儘管預設選中項在預設條件下是第一個顯示的，但是並非它在option項中是第一個排列的，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> <html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){ 
  var osel=document.getElementById("sel"); 
  var oshow=document.getElementById("show");
  function getIndex(obj){
    var opts=obj.options;
    var num=0;
    for(var index=0;index<opts.length;index++){
      if(opts[index].defaultSelected){
        num=index;
        return num;
      }
    }
  }
  oshow.innerHTML=getIndex(osel);
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<select id="sel"> 
  <option>螞蟻部落一</option> 
  <option>螞蟻部落二</option> 
  <option selected>螞蟻部落三</option> 
  <option>螞蟻部落四</option> 
  <option>螞蟻部落五</option> 
</select> 
</body> 
</html>

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

一.程式碼註釋:

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

2.var osel=document.getElementById("sel")，獲取select下拉選單物件。

3.var oshow=document.getElementById("show")，獲取div物件。

4.function getIndex(obj){}，此函式可以獲取select下拉選單預設選中項的索引，引數是一個select物件。

5.var opts=obj.options，獲取select下拉選單option項的集合。

6.var num=0，宣告一個變數，並賦初值為0，它用來儲存索引值。

7.for(var index=0;index<opts.length;index++)，遍歷option集合中的每一個option項。

8.if(opts[index].defaultSelected){num=index;return num;}，如果是預設選中項，那麼就將索引值賦值給num，並返回num。

9.oshow.innerHTML=getIndex(osel)，將索引值寫入div中。

二.相關閱讀:

1.options可以參閱javascript select.options集合一章節。 

2.defaultSelected屬性可以參閱javascript option.defaultSelected一章節。

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

相關文章