从一个select中选中若干项到另一个select中

最新推荐文章于 2024-01-25 00:14:46 发布

zhengxianyi515

最新推荐文章于 2024-01-25 00:14:46 发布

阅读量1.2k

点赞数

分类专栏： Javascript 文章标签： button function xhtml html javascript 电子商务

本文链接：https://blog.csdn.net/Morecans/article/details/1681051

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近没有什么事做,看到我们前一阵子在南航电子商务做的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"></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>

zhengxianyi515

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从一个select中选中若干项到另一个select中

最近没有什么事做,看到我们前一阵子在南航电子商务做的Feinar项目中有个js做的效果还不错,拿出来研究了一番,发现那个实现的方法实在是太糟糕了,转一七找一八的,才算勉强实现了两个列表框Select的选项Option交换,实在是叫人看着心急，不就这么个简单的功能么，怎么写了他妈的十来个函数呢？于是乎，自己动手写了如下的两个函数，应该说完全满足需要，完全实现了功能。在网上也看到过类似的帖子，（两个s
复制链接

扫一扫