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>



你可能感兴趣的:(J#)