js如何動態為select下拉選單新增option項

在實際操作中，有時候需要根據情況新增或者刪除select下拉選單的option選項，本章節就介紹一下如何實現此功能，下面將分佈簡單介紹一下，程式碼如下:

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

[JavaScript] 純文字檢視 複製程式碼
var theSelect=document.createElement("select"); 
theSelect.id="theId"; 
document.body.appendChild(theSelect);

以上程式碼動態建立一個select下拉選單，並將其id屬性值設定為"theId"，然後新增到body中。

二.動態新增option選項:

[JavaScript] 純文字檢視 複製程式碼
var selectObj=document.getElementById("theId"); 
selectObj.add(new Option("文字","值")); //在IE中有效 
selectObj.options.add(new Option("text","value")); 相容IE與firefox

以上程式碼可以在現有的select下拉選單中新增option選項。要特別注意瀏覽器相容問題。

三.刪除select中某一個option項:

[JavaScript] 純文字檢視 複製程式碼
var selectObj=document.getElementById("theId"); 
selectObj.options.remove(index);

index是要刪除的選項的索引值，如果index是1，那麼就是刪除第二個選項。

關於select的操作還有很多，這裡就不多介紹了，可以參閱javascript動態操作select下拉選單一章節。