两个Select相互添加删除（在IE8下删除出错的解决方法）

最新推荐文章于 2023-11-30 01:03:21 发布

原创最新推荐文章于 2023-11-30 01:03:21 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

javascript/jquery 专栏收录该内容

24 篇文章

订阅专栏

两个select框相互添加删除：

<div style="width:570px;left:10px; height:230px; overflow-y:auto; ">
					<div style="width:240px">
						<span>已选</span>
						<span style="float:right">预选</span>
					
					</div>
					<div style="width:160px; float:left">
					<select id="select1" name="select1" style="width:150px" size="11" multiple="true">
						<option value="内存使用率">内存使用率</option>
						<option value="CPU使用率">CPU使用率</option>						
					</select>					
					</div>
					<div style="width:50px; float:left">
							<br />	
							<br />
							<input type="button" onclick="add_resu()" value="<"  />		
							<input type="button" onclick="out_resu()" value=">"  />		
								
					</div>
					<div style="width:150px; float:left">
						<select name="select2" id="select2" style="width:150px" size="11" multiple="true">
							<option value="内存使用率">内存使用率</option>
							<option value="CPU使用率">CPU使用率</option>
							<option value="会话数">会话数</option>
							<option value="进字节">进字节</option>	
							<option value="出字节">出字节</option>						
						</select>
					
					</div>
					
				</div>

点击“>”时。把右边的添加到左边，点击"<"的时候，从左边把选中的删除掉，下面给出2个js方法

//从右边添加到左边
function add_resu(){
	var sel=document.getElementsByName("select2")[0];
	var selvalue= sel.options[sel.options.selectedIndex].value//你要的值
	
	var sec=document.getElementById("select1").options;	
	for(var i=0;i<sec.length;i++){   		
       if(sec[i].value == selvalue){    
         	alert("已经存在");
             return false;    
        } 
	}
	
document.getElementById("select1").options.add(new Option(selvalue, selvalue));

}
//删除（从左边移除）
function out_resu(){
	var sel=document.getElementsByName("select1")[0];
	var selvalue= sel.options[sel.options.selectedIndex].value;
	var sec=document.getElementById("select1").options;		
	for(var i=0;i<sec.length;i++){   		
       if(sec[i].value == selvalue){ 
		//一定要注意这个方法，这在IE浏览器下是无效的，（火狐。谷歌都正常）具体情况我也不清楚	
		//  sec[i].remove(i);  //该方法在IE下无效

		//如果要考虑IE的情况下，必须使用下面的方法，该方法适应所有浏览器，（测试过的）
         	sec[i]=null;                
        } 
	}
}

大家一定要注意删除的js说明