JavaScript　实现双向选择列表框

最新推荐文章于 2018-03-26 14:08:43 发布
最新推荐文章于 2018-03-26 14:08:43 发布
阅读量1.4k 收藏 4
点赞数
文章标签： javascript function input div button border

<html>
<head>
   <script language="JavaScript">
     <!--页面载入时初始化所有未选择的数据-->
     function loadAllUnselected()
     {
        var unassignedTable=document.getElementById("unassignedTable");
        var rowsUnselected=unassignedTable.childNodes[0].childNodes;
        document.getElementById("unselected").value="";
        for(var i=0;i<rowsUnselected.length;i++)
        {
            if(rowsUnselected[i].tagName=="TR" && rowsUnselected[i].getAttribute("id")!='')
            {
                document.getElementById("unselected").value=
                document.getElementById("unselected").value+'||'+rowsUnselected[i].getAttribute("id");
            }
        }
        var assignedTable=document.getElementById("assignedTable");
        var rowsSelected=assignedTable.childNodes[0].childNodes;
        for(var i=0;i<rowsSelected.length;i++)
        {
            if(rowsSelected[i].tagName=="TR" && rowsSelected[i].getAttribute("id")!='')
            {
                document.getElementById("unselected").value=
                document.getElementById("unselected").value+'||'+rowsSelected[i].getAttribute("id");
            }
        }
     }
    
     <!--汇总所有已分配和未分配数据-->
     function countAllIds()
     {
        var unassignedTable=document.getElementById("unassignedTable");
        var rowsUnas=unassignedTable.childNodes[0].childNodes;
        document.getElementById("unassignedids").value='';
        for(var i=0;i<rowsUnas.length;i++)
        {
            if(rowsUnas[i].tagName=="TR" && rowsUnas[i].getAttribute("id")!='')
            {
                document.getElementById("unassignedids").value=
                document.getElementById("unassignedids").value+'||'+rowsUnas[i].getAttribute("id");
            }
        }
        var assignedTable = document.getElementById("assignedTable");
        var rowsas=assignedTable.childNodes[0].childNodes;
        document.getElementById("assignedids").value='';
        for(var i=0;i<rowsas.length;i++)
        {
            if(rowsas[i].tagName=="TR" && rowsas[i].getAttribute("id")!='')
               document.getElementById("assignedids").value=
               document.getElementById("assignedids").value+'||'+rowsUnas[i].getAttribute("id");
        }
     }
    
     <!--将选中的行移至未分配表-->
     function moveToLeft()
     {
         //获取所有选中的ID值
         var ids=document.getElementById("selected").value;
         var idArray=ids.split('||');
         for(var i=0;i<idArray.length;i++)
         {
             if(idArray[i]!='')
             {
                  var moveObj=document.getElementById(idArray[i]);
                  add(moveObj,"unassignedTable");
             }
         }
         countAllIds();
     }
    
     <!--将选中的行移至分配表--》
     function moveToRight()
     {
         //获取所有选中的ID值
         var ids=document.getElementById("selected").value;
         var idArray=ids.split('||');
         for(var i=0;i<idArray.length;i++)
         {
             if(idArray[i]!='')
             {
                var moveObj=document.getElementById(idArray[i]);
                add(moveObj,"assignedTable");
             }
         }
         countAllIds();
     }
    
     <!--在指定的表格中添加对应的行-->
     function add(rowObj,tableObj)
     {
        var table=document.getElementById(tableObj);
        var newRow=table.insertRow(table.rows.length);
        newRow.replaceNode(rowObj);
     }
    
     <!--删除已选择的行-->
     function removeRow(obj)
     {
        var clickedRow=obj;
        while(clickedRow.tagName!="TR")
        {
           clickedRow=clickedRow.ParentNode;
        }
        clickedRow.parentNode.removeChild(clickedRow);
     }
    
     <!--当鼠标点击时切换背景色与设置值-->
     function changeBackground(obj)
     {
         if(obj.style.background=="silver")
         {
             obj.style.background="#ffffff";
             document.getElementById("unselected").value=
             document.getElementById("unselected").value+'||'+obj.getAttribute("id");
             document.getElementById("selected").value=
             document.getElementById("selected").value.replace('||'+obj.getAttribute("id"),'');            
         }
         else
         {
             if(document.getElementById("selected").value.indexOf(obj.getAttribute("id"))<0)
             {
                 document.getElementById("selected").value=
                 document.getElementById("selected").value+'||'+obj.getAttribute("id");
                 document.getElementById("unselected").value=
                 document.getElementById("unselected").value.replace('||'+obj.getAttribute("id"),'');
             }
             obj.style.background="silver";
         }
     }
   </script>
  
   <style>
     body {text-align:center;}
     p {text-align:center;}
     #wrapper {width:800px;margin:0 auto;text-align:left;position:relative;}
     #buttonArea {width:100px;float:left;}
     #leftPanel {width:350px;float:left;}
     #rightPanel {width:350px;float:left;}
     #footer { clear:both;}
   </style>
</head>
<body οnlοad="loadAllUnselected();countAllIds();">
   <div id="wrapper">
      <div>
        <p>双向选择框示例</p>
      </div>
      <div id="leftPanel">
      <p>
         <table id="unassignedTable" width="350" border="1" style="border-collapse:collapse;" bordercolor="#111111" cellpadding="0" cellspacing="0">
         <tr></tr><th colspan="3">未分配</th></tr>
         <tr><th>列1</th></tr>
         <tr><th>列2</th></tr>
         <tr><th>列3</th></tr>
         <tr id="a" οnclick=changeBackground(this)>
         <td>A</td><td>A</td><td>A</td>
         </tr>
         <tr id="b" οnclick="changeBackground(this)">
         <td>B</td><td>B</td><td>B</td>
         </tr>
         </table>
      </p>
      </div>
   </div>
  
   <div id="buttonArea">
   <p>
     <p>
       <input type="button" οnclick="moveToRight()" value=">>">
     </p>
     <p>
       <input type="button" οnclick="moveToLeft()" value="<<">
     </p>
</p>
   </div>
  
   <div id="rightPanel">
     <p>
        <table id="assignedTable" width="350" border="1" style="border-collapse:collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
          <tr><th colspan="3">以分配</th></tr>
          <tr><th>列1</th></tr>
          <tr><th>列2</th></tr>
          <tr><th>列3</th></tr>
          <tr id="c" οnclick=changeBackground(this)>
          <td>C</td><td>C</td><td>C</td>
          </tr>
        </table>
     </p>
   </div>
<p>未选择：
    <input id="unselected" type="text" value="">&nbsp;&nbsp;&nbsp;已选择：
    <input id="selected" type="text" value="">
</p>
<p>未分配：
     <input id="unassignedids" type="text" value="">&nbsp;&nbsp;&nbsp;以分配：
     <input id="assignedids" type="text" value="">
</p>

</body>
</html>

longquan880
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js制作的双向列表选择框
张庆（网眼）
10-27 3911
在一对多选择的Web前端界面中，用双向列表选择框布局是比较直观的。以下是用 Javascript 制作的一个示例，关键代码都有了，已经可以使用。大家可以针对自己的实际需求再进行修改，使其更完善，比如加一个“reset”功能等。             待分配的角色：              待分配的角色-1        待分配的角色-2        待分配的角色-3        待
双向选择列表框
aRiverstones的博客
11-21 859
双向选择列表框 function moveinto(){ var a=document.getElementById("s1").options; var b=document.getElementById("s1").selectedIndex; document.getElementById("s2").appendChild(a[b].cloneNode(true));
js实现左右双向选择器
10-10
js非常简单的实现了左右双向选择器，非常简单，拿过去就能用，希望能帮助到你
角色 左右分配
u013568834的专栏
03-13 566
jquery角色左右选择框 - 站长素材 #one{width:200px; height:180px; float:left} #two{width:50px; height:180px; float:left} #three{width:200px; height:180px; float:left} .btn{width:50px; height:30px; margin-top:10p
jQuery实现双向选择列表框
08-27
jQuery实现双向选择列表框，待选和已选可以计数，支持双击，单击。
jQuery双向选择穿梭框代码
07-24
"jQuery双向选择穿梭框代码"是一种高效、便捷的组件，它主要用于实现用户在两个列表之间移动选项的功能，常用于数据筛选、角色分配等场景。这款基于jQuery和layui框架的穿梭框，通过JSON异步获取数据，提供了丰富的...
jQuery实现列表框双向选择操作
05-08
本文将深入探讨如何使用jQuery实现列表框的双向选择操作，这是一个常见的功能需求，尤其在数据筛选、信息交换等场景下。 首先，我们要理解双向选择的基本概念。双向选择通常指的是用户可以在两个独立的列表框之间...
下拉列表框双向选择操作
叶少翔
01-12 1479
待选区 请选择 Mysql Redis MongoDB PHP Javascript Jquery Linux Ajax > 已选区 $(document).ready(function(){ //从左边添加到右边 $("#left2Right").on('click',funct
JS双向选择编辑器
03-19
JS双向选择编辑器
jQuery下拉列表框双向选择
11-11
jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择
基于bootstrap的双向选择器
01-09
bootstrap双向选择器,样式柔和、功能全面，支持左移、右移、全部左移、全部右移以及搜索功能。
jquery实现 左右 双向选择器 挺好用
08-19
今天刚弄好一个双向选择器，挺好用的。 分享于此 下载即可使用。
双选框 两个<select>标签组成 高效代码清晰
11-21
由两个<select>标签组成的具有挑选功能的js组建。 可实现左侧的元素移到右侧，右侧移到左侧。 有提交功能。 代码简洁、高效复用性强。 本段代码有Map的遍历读者不必细究。
双向选择弹出框
iOS重新起航
05-05 469
文章来源 : http://www.cocoachina.com/ios/20141126/10320.html​ UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"标 题" message:@"这个是UIAlertController的默认样式" preferre
JS小功能系列10双向选择
weixin_34044273的博客
10-15 73
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
自定义双向选择框
u014627153的博客
03-26 1284
// html css 省略 // html 保持拼接字符串 ； data 借口数据 ;userSelectList_one 右侧栏 // userList_one 左侧栏 data-hidden 用于标志右侧 var html = []; if (data.length &gt; 0) { var right_array = []; $("#pop_yingji #user...
列表商品双向联动实现原理
最新发布
06-01
列表商品双向联动是指在商城页面中，当用户在左侧商品列表中选择一项商品时，右侧商品详情区域会自动更新显示该商品的详细信息。反之亦然，当用户在右侧商品详情区域中选择一个商品时，左侧商品列表中对应的商品也会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值