程序博客网 > java 审批流程框架

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

来源：互联网发布：java 审批流程框架编辑：程序博客网时间：2024/06/08 16:41

最近没有什么事做,看到我们前一阵子在南航电子商务做的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=">>" onclick="selectInAll(form1.select1,form1.select2)" />
        <br /><input type="button" name="Submit" value="->" onclick="selectIn(form1.select1,form1.select2)" />
        <br /><input type="button" name="Submit2" value="<-" onclick="selectIn(form1.select2,form1.select1)"/>
        <br /><input type="button" name="Submit2" value="<<" onclick="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>

java 审批流程框架

java 审批流程框架

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子南京南江中学南江大峡谷在哪里海口市南江花园绿都南江商业中心贵州南江大峡谷风景区四川省南江中学南江里小学怎么样玉林南江高中南江口高铁站南江小河职业中学南江大峡谷好玩吗东阳南江水库南江大峡谷漂流多少钱南江线时刻表四川巴中南江云南南江医院开阳县南江大峡谷南江光雾山门票南江事业单位考试巴中南江住宿四川南江物流南江大峡谷激情漂流成都到南江的车票重庆南江地质队南江哪里好玩南江大峡谷游玩南江大峡谷缆车南江到南充汽车时刻表平江到南江桥贵阳怎么到南江大峡谷南江大峡谷旅游费用巴中南江旅游四川南江旅游景点南京南江中学跳楼四川南江风景南江旅游景点南江教育网首页巴中南江酒店贵州南江大峡谷在哪里横店南江壹号南江到南充汽车票