最近没有什么事做,看到我们前一阵子在南航电子商务做的Feinar项目中有个js做的效果还不错,拿出来研究了一番,发现那个实现的方法实在是太糟糕了,转一七找一八的,才算勉强实现了两个列表框Select的选项Option交换
,实在是叫人看着心急,不就这么个简单的功能么,怎么写了他妈的十来个函数呢?于是乎,自己动手写了如下的两个函数,应该说完全满足需要,完全实现了功能。在网上也看到过类似的帖子,(
两个select的option交换)不过他那是在是太简单了,而且只支持单项交换,而我的不仅支持单项交换,还支持多项,和全部交换,而且还不会有重复的项出现在目的列表中。牛不是吹的,请看下文:
函数selectIn(objFrom,objTo):
实现从一个列表对象objFrom的选中项option添加到另一个列表对象objTo的末尾并显示为选中状态,同时从列表对象objFrom中删除被选中的项.
function selectIn(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++){
if(objFrom.options[i].selected==true){
var flag = true;
for(var j = 0; j < objTo.options.length; j ++){
if(objTo.options[j].value==objFrom.options[i].value){
flag = false;
break;
}
}//排除objTo中有重复项,这个在动态产生option时很有用
if(flag){
var opt = document.createElement("OPTION");
opt.innerHTML = objFrom.options[i].innerHTML ;
opt.value = objFrom.options[i].value ;
opt.selected = true;
objTo.appendChild(opt);
objFrom.remove(i);
i--;
}
}
}
}
函数selectInAll(objFrom,objTo):
实现选中列表对象objFrom中的所有项,然后调用 selectIn(objFrom,objTo),实现将列表对象objFrom的所有项option添加到另一个列表对象objTo的末尾并显示为选中状态,同时从列表对象objFrom中删除所有的项.
function selectInAll(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++)
objFrom.options[i].selected=true;
selectIn(objFrom,objTo);
}
下面是测试用的HTML源文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两个select的option交换</title>
<script language="javascript" type="text/javascript"><!--
function selectIn(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++){
if(objFrom.options[i].selected==true){
var flag = true;
for(var j = 0; j < objTo.options.length; j ++){
if(objTo.options[j].value==objFrom.options[i].value){
flag = false;
break;
}
}//排除objTo中有重复项,这个在动态产生option时很有用
if(flag){
var opt = document.createElement("OPTION");
opt.innerHTML = objFrom.options[i].innerHTML ;
opt.value = objFrom.options[i].value ;
opt.selected = true;
objTo.appendChild(opt);
objFrom.remove(i);
i--;
}
}
}
}
function selectInAll(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++)
objFrom.options[i].selected=true;
selectIn(objFrom,objTo);
}
--></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="299" border="1">
<tr>
<td width="86"><select name="select1" size="10" multiple="multiple" id="select1">
<option value="1">1->11</option>
<option value="2">2->22</option>
<option value="3">3->33</option>
<option value="4">4->44</option>
<option value="5">5->55</option>
</select>
</td>
<td width="30"><input type="button" name="Submit" value=">>" οnclick="selectInAll(form1.select1,form1.select2)" />
<br /><input type="button" name="Submit" value="->" οnclick="selectIn(form1.select1,form1.select2)" />
<br /><input type="button" name="Submit2" value="<-" οnclick="selectIn(form1.select2,form1.select1)"/>
<br /><input type="button" name="Submit2" value="<<" οnclick="selectInAll(form1.select2,form1.select1)"/></td>
<td width="161"><select name="select2" size="10" multiple="multiple">
<option value="6">6->66</option>
<option value="7">7->77</option>
<option value="8">8->88</option>
<option value="9">9->99</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
函数selectIn(objFrom,objTo):
实现从一个列表对象objFrom的选中项option添加到另一个列表对象objTo的末尾并显示为选中状态,同时从列表对象objFrom中删除被选中的项.
function selectIn(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++){
if(objFrom.options[i].selected==true){
var flag = true;
for(var j = 0; j < objTo.options.length; j ++){
if(objTo.options[j].value==objFrom.options[i].value){
flag = false;
break;
}
}//排除objTo中有重复项,这个在动态产生option时很有用
if(flag){
var opt = document.createElement("OPTION");
opt.innerHTML = objFrom.options[i].innerHTML ;
opt.value = objFrom.options[i].value ;
opt.selected = true;
objTo.appendChild(opt);
objFrom.remove(i);
i--;
}
}
}
}
函数selectInAll(objFrom,objTo):
实现选中列表对象objFrom中的所有项,然后调用 selectIn(objFrom,objTo),实现将列表对象objFrom的所有项option添加到另一个列表对象objTo的末尾并显示为选中状态,同时从列表对象objFrom中删除所有的项.
function selectInAll(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++)
objFrom.options[i].selected=true;
selectIn(objFrom,objTo);
}
下面是测试用的HTML源文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两个select的option交换</title>
<script language="javascript" type="text/javascript"><!--
function selectIn(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++){
if(objFrom.options[i].selected==true){
var flag = true;
for(var j = 0; j < objTo.options.length; j ++){
if(objTo.options[j].value==objFrom.options[i].value){
flag = false;
break;
}
}//排除objTo中有重复项,这个在动态产生option时很有用
if(flag){
var opt = document.createElement("OPTION");
opt.innerHTML = objFrom.options[i].innerHTML ;
opt.value = objFrom.options[i].value ;
opt.selected = true;
objTo.appendChild(opt);
objFrom.remove(i);
i--;
}
}
}
}
function selectInAll(objFrom,objTo){
for(var i = 0; i < objFrom.options.length; i ++)
objFrom.options[i].selected=true;
selectIn(objFrom,objTo);
}
--></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="299" border="1">
<tr>
<td width="86"><select name="select1" size="10" multiple="multiple" id="select1">
<option value="1">1->11</option>
<option value="2">2->22</option>
<option value="3">3->33</option>
<option value="4">4->44</option>
<option value="5">5->55</option>
</select>
</td>
<td width="30"><input type="button" name="Submit" value=">>" οnclick="selectInAll(form1.select1,form1.select2)" />
<br /><input type="button" name="Submit" value="->" οnclick="selectIn(form1.select1,form1.select2)" />
<br /><input type="button" name="Submit2" value="<-" οnclick="selectIn(form1.select2,form1.select1)"/>
<br /><input type="button" name="Submit2" value="<<" οnclick="selectInAll(form1.select2,form1.select1)"/></td>
<td width="161"><select name="select2" size="10" multiple="multiple">
<option value="6">6->66</option>
<option value="7">7->77</option>
<option value="8">8->88</option>
<option value="9">9->99</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>