原生javascript新增和刪除select的option項程式碼

antzone發表於2017-03-17

由於jquery的出現,使對於DOM的操作變的更為簡單了,但是有時候需要使用原生的javascript來完成這一切,當然jquery也是javascript,只是將一些操作做了封裝而已,下面就簡單分享一下使用原生javascript新增或者刪除option項的程式碼。

一.刪除所有的option項:

[JavaScript] 純文字檢視 複製程式碼
function delAllOptions(){  
  document.getElementById("selId").options.length=0;   
}

將options集合的length屬性設定為0即可實現此功能。

二.刪除指定的option項:

[JavaScript] 純文字檢視 複製程式碼
function delOneOption(index){  
  document.getElementById("selId").options.remove(index);   
}

index是option的索引值,從0開始。

三.新增一個option項:

[JavaScript] 純文字檢視 複製程式碼
function addOneOption(){ 
  var selectObj=document.getElementById("selId"); 
  selectObj.options[selectObj.length]=new Option("antzone", "螞蟻部落"); 
}

相關文章