javascript獲取select下拉選單框的value和text值

select下拉選單是最為常用的表單元素，當然使用javascript操作select下拉選單也就是必須要掌握的技巧，內容很多，不過最為常見的就是獲取選中項的value和text的值，下面就分步驟介紹一下如何實現此操作。

一.select下拉選單程式碼:

[HTML] 純文字檢視 複製程式碼
<select id="sel">
  <option value="1">螞蟻部落一</option>
  <option value="2">螞蟻部落二</option>
  <option value="3">螞蟻部落三</option>
</select>

下面就對上面的select下拉選單進行操作。

二.如何訪問option項:

使用options屬性可以返回option項的集合，然後使用索引就可以訪問其中的指定項了，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var sel=document.getElementById("sel");
sel.options[1];

以上程式碼可以訪問select下拉選單中第二個option想，索引值是從0開始的。

三.如何訪問選中的option項:

selectedIndex屬性可以返回當前選中項的索引值，於是就可以獲取被選中的option項，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var sel=document.getElementById("sel");
sel.options[sel.selectedIndex];

以上程式碼可以返回當前選中的option物件。

四.如何獲取選中的value和text值:

[JavaScript] 純文字檢視 複製程式碼
sel.options[sel.selectedIndex].text;//獲取選中項text值
sel.options[sel.selectedIndex].value//獲取選中項value值

以上程式碼可以獲取被選中項的value和text值。