JavaScript動態操作select下拉選單

在實際應用中，往往要根據需要去建立一個select下拉選單，或者說需要動態的新增和刪除一個option項，下面就通過簡單的例項介紹一下如何實現此功能。

一.動態建立一個select下拉選單:

[JavaScript] 純文字檢視 複製程式碼
function createSelect(){ 
  var newSelect=document.createElement("select"); 
  newSelect.id="mySelect"; 
  document.body.appendChild(newSelect); 
}

以上程式碼能夠網頁中建立一個id屬性值為myselect的select下拉選單。

二.為select下拉選單新增一個option項:

[JavaScript] 純文字檢視 複製程式碼
mySelect.add(new Option("文字","值"));

三.刪除一個指定的option項:

[JavaScript] 純文字檢視 複製程式碼
newSelect.options.remove(index);

刪除指定索引的option項。第一個option項的索引值為0。

四.刪除所有的option專案:

[JavaScript] 純文字檢視 複製程式碼
obj.options.length=0;

將options物件集合的長度設定為0即可。

五.獲得指定option的文字內容:

[JavaScript] 純文字檢視 複製程式碼
obj.options[index].text

以上程式碼可以獲得指定索引值option選項的文字內容，index值是從0開始的。

六.獲得指定option的值:

[JavaScript] 純文字檢視 複製程式碼
obj.options[index].value

以上程式碼可以獲得指定索引值option選項的值，index值是從0開始的。

七.獲得選中項的值:

[JavaScript] 純文字檢視 複製程式碼
var index=obj.selectedIndex; //序號，取當前選中選項的序號 
var val = obj.options[index].value;

以上程式碼可以獲得當前選中項的值。

八.修改指定的option項:

[JavaScript] 純文字檢視 複製程式碼
var val = obj.options[index]=new Option("新文字","新值");

以上程式碼可以膝蓋指定索引值option選項的文字和值，index值是從0開始的。

九.刪除一個select:

[JavaScript] 純文字檢視 複製程式碼
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect);

以上程式碼可以刪除指定的select物件。