JavaScript select新增option

實際操作中，有時需要根據情況新增或者刪除select下拉選單的option選項。

下面介紹一下如何利用JavaScript實現類似操作。

一.動態建立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下拉選單一章節。