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

两个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说明
说明 这个控件实现相当简单,基于jQuery实现,只编写一些基本功能,满足一般使用。提供原代码,可以根据自己的项目要求修改,只在IE6、IE7、IE8IE9中测试。有问题联系邮箱:zliuyao2010@163.com 初始化构造 构造方法在:input表单添加class="e_select"属性 属性说明:class="e_select" 构造下拉框 属性说明:etop="0" 控件下图片位置,默认可以不用添加此属性。 属性说明:edata="{,普通:普通AA,模糊:模糊,右边模糊:右边模糊}" or {"":"","男":"男1","女":"女1","其他":"其他1"} 下拉框控件中的值,注意:支持两种赋值,json格式以及键值对形式,PS:若下拉列表中有空值键对用英文的“,”,json格式用:"":""。 属性说明:echange="echange" 选择下拉值的回调方法名称,PS:只要输入方法名称,调用方法中有两个参数key(键) 和 value(值) 例如:function echange(key,value) {alert(key + " " + value);} 动态赋值 function setValue() { jQuery("#text1").val("").attr("data","");//赋值请清空原来的值(很重要) jQuery("#text1").attr("edata",'{"":"","男":"男1","女":"女1","其他":"其他1"}'); } 获取值 function getValue() { alert("key:"+document.getElementById("text1").value + " value:" + document.getElementById("text1").data); } 事件 function echange(key,value) { alert("key:"+key + " " + "value:"+value); } 测试 省: 市: 区: 普通模糊右边模糊普通模糊右边模糊普通模糊右边模糊
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值