select下拉菜单添加不重复项代码下载

实际应用中，可能需要为select下拉菜单动态的添加一个option选项。

并且保证这个option并不重复，下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="https://www.51qianduan.com/" />     
<title>51前端</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","51前端五","5");
}
</script> 
</head> 
<body> 
<select name="sel" id="sel">
  <option value="1">51前端一</option>
  <option value="2">51前端二</option>
  <option value="3">51前端三</option>
  <option value="4">51前端四</option>
</select>
</body> 
</html>

代码描述：select下拉菜单添加项。select下拉菜单添加不重复项代码下载

下载全部收藏

126 168

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册