js添加,移除select 控件的option

来源:互联网 发布:淘宝steam充值卡便宜 编辑:程序博客网 时间:2024/05/17 06:17

<html>
 <head>

 <script>
 function addDefectOption(){
//找到select  控件
 var opts = document.getElementById("group");
 alert(opts.childNodes.length);
 //找出不良代码节点的位置,在其之前插入不良代码
 var opt = opts.childNodes[5];
 var flag = false;
 for(var i=0;i<opts.length;i++){
  var vtValue = opts.options[i].text;
 //如果不良代码不存在,则flag=true;
  if(vtValue=="4."){
   flag = true;
  }
 }
 if(flag==false){
  el = document.createElement("option");
  //设置value为12,显示内容为“不良代码”的option
  el.value="12";
  el.appendChild(document.createTextNode("不良代码"));
  //插入新增的option
  opts.insertBefore(el,opt);
 }
}

 function removeDefectOption(){
 var opts = document.getElementById("group");
 for(var i=0;i<opts.length;i++){
  var vtValue = opts.options[i].text;
 //如果不良代码存在,则移出不良代码的option项;
  if(vtValue=="2."){
   opts.remove(i);
   return;
  }
 
 }
}
 
 </script>
</head>
 <body/>
 <select name="group" id="group" >
  <option value="1">1.</option>
  <option value="2">2.</option>
  <option value="3">3.</option>

 </select>
 <input type="button" name="add" value="add" onClick="addDefectOption()"/>
 <input type="button" name="remove" value="remove" onClick="removeDefectOption()"/>
 </body>
</html>

 

原创粉丝点击