JavaScript新增和刪除select下拉項

admin發表於2018-03-08

select下拉選單在網頁中非常的常用,有時需要根據特定情況,對select下拉選單進行動態的操作。

下面就簡單介紹一下相關內容,希望能夠給大家帶來一定的幫助。

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

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

以上程式碼建立了一個select下拉選單物件,並且設定id屬性值。

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

[JavaScript] 純文字檢視 複製程式碼
//theSelect.add(new Option("文字","值")); //在IE中有效 
theSelect.options.add(new Option("text","value")); //相容所有主流瀏覽器

以上程式碼可以為select下拉選單新增下拉選項,要注意瀏覽器相容性問題。

三.刪除一個option項:

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

以上程式碼可以刪除當前被選項。remove()的引數可以是任意選項的索引,索引值從0開始的。

四.刪除所有選項:

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

將選項的的長度設定為0即可。


相關文章