select上拉域,左右增加,和移除
select下拉域,左右增加,和移除
//增加 function addOption(){ var selectconfig=form.selectconfig.value; //获取显示值 var selectconfigvalue=document.getElementById("selectconfig").options[document.getElementById("selectconfig").selectedIndex].text; var selectnews=document.getElementById("selectnew"); if (selectconfig=="") { alert ("请选择添加项"); return false; } var i=0; var b=true; for(var j=0;j<selectnews.options.length;j++){ if (selectconfig==selectnews.options[j].text){ b=false; } } if(b){ i++; selectnews.options.add(new Option(selectconfigvalue,selectconfig),i); } } //删除 function delOption(){ var selectnews=form.selectnew.value; if (selectnews=="") { alert ("请选择删除项"); return false; } var length2=document.getElementById("selectnew"); length2.options.remove(length2.options.selectedIndex); }
<table width="770" align="center"> <tr> <td>字段列表<br/> <SELECT size=10 name="selectconfig" id="selectconfig" style="width=200px"> <OPTION value="title">标题</OPTION> <OPTION value="message">描述</OPTION> </SELECT> </td> <td><input type="button" name="" value="添加--->" onclick="addOption();"> <br/> <br/> <input type="button" name="" value="<---移除" onclick="delOption();"></td> <td>已选列表<br/> <SELECT size=10 name="selectnew" id="selectnew" style="width=200px"> </SELECT> </td> </tr> </table>