select下拉域，左右增加，和移除

最新推荐文章于 2022-01-12 14:22:08 发布

iteye_19819

最新推荐文章于 2022-01-12 14:22:08 发布

阅读量142

点赞数

分类专栏：学习笔记文章标签： J#

本文链接：https://blog.csdn.net/iteye_19819/article/details/82069472

版权

学习笔记专栏收录该内容

64 篇文章 0 订阅

订阅专栏



//增加
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>