select下拉選單新增不重複項

antzone發表於2017-03-24

實際應用中，可能需要為select下拉選單動態的新增一個option選項。

並且保證這個option並不重複，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>螞蟻部落</title>  
<script> 
function isSelectItemExit(objSelectId,objItemValue){
  var objSelect=document.getElementById(objSelectId); 
  for(var index=0;index<objSelect.length;index++){
   if(objSelect.options[index].value==objItemValue){
     return true;
   }
  }
}
function addOneItemToSelect(objSelectId,objItemText,objItemValue){ 
  var objSelect=document.getElementById(objSelectId); 
  if(null != objSelect && typeof(objSelect) != "undefined"){ 
    if(isSelectItemExit(objSelectId,objItemValue)){ 
      alert('提示訊息','該值的選項已經存在!','info'); 
    } 
    else{ 
      var varItem=new Option(objItemText,objItemValue); 
      objSelect.options.add(varItem); 
    } 
  } 
} 
window.onload=function(){
  addOneItemToSelect("sel","螞蟻部落五","5");
}
</script> 
</head> 
<body> 
<select name="sel" id="sel">
  <option value="1">螞蟻部落一</option>
  <option value="2">螞蟻部落二</option>
  <option value="3">螞蟻部落三</option>
  <option value="4">螞蟻部落四</option>
</select>
</body> 
</html>

可以新增一個新項，並且不會產生重複現象，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.function isSelectItemExit(objSelectId,objItemValue){}，此函式可以判斷新新增的項的value值是否和原有的重複，objSelectId是下拉選單的id屬性值，objItemValue是新新增項的value值。

（2）.var objSelect=document.getElementById(objSelectId); ，獲取select下拉選單物件。

（3）.for(var index=0;index<objSelect.length;index++){}，遍歷每一個下拉選單的option項。

（4）.if(objSelect.options[index].value==objItemValue){return true;}，如果有重複的，就返回true跳出函式。

（5）.function addOneItemToSelect(objSelectId,objItemText,objItemValue){}，此函式可以新增新項，第一個引數select下拉選單的id屬性值，第二個是文字內容，第三個是value屬性值。

（6）.var objSelect=document.getElementById(objSelectId)，獲取select下拉選單物件。

（7）.if(null != objSelect && typeof(objSelect) != "undefined")，物件是否存在。

（8）.if(isSelectItemExit(objSelectId,objItemValue)){alert('提示訊息','該值的選項已經存在!','info');} ，新項的值和原有項的值重複就彈出提示。

（9）.else{var varItem=new Option(objItemText,objItemValue);objSelect.options.add(varItem);} ，建立一個新的option物件，並賦予指定的text和value內容，然後新增到options集合。

二.相關閱讀：

（1）.options集合參閱JavaScript select.options一章節。 

相關文章