用JavaScript实现两个列表框的数据移动

最新推荐文章于 2023-04-25 10:03:13 发布
最新推荐文章于 2023-04-25 10:03:13 发布
阅读量1.4k 收藏
点赞数
文章标签： javascript function list button input border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wubai250/article/details/1245586
版权

<html><head>
<title>用JavaScript实现两个列表框的数据移动</title>
<script language="JavaScript">
function addOption(fromSelectObject, toSelectObject, maxLimit){
    var overMax = false;
    for(i=0; i<fromSelectObject.options.length; i++){
        if(fromSelectObject.options[i].selected == true){
            if(maxLimit != -1){
                if(toSelectObject.options.length >= maxLimit){
                    overMax = true;
                    break;
                }
            }
            toSelectObject.options[toSelectObject.options.length] = new Option(fromSelectObject.options[i].text, fromSelectObject.options[i].value, 0, 0);
            toSelectObject.options[toSelectObject.options.length-1].style.background = fromSelectObject.options[i].style.background;
            toSelectObject.options[toSelectObject.options.length-1].style.color = fromSelectObject.options[i].style.color;
        }
    }
    cancelAllSelected(fromSelectObject);
    filterSrcSelect(fromSelectObject, toSelectObject);
    if(overMax){
        alert("超过最大选择数");
    }
}

function deleteOption(fromSelectObject, toSelectObject, bakSelectObject){
   var canRemoveSrc = false;
   for(i=0; i<toSelectObject.options.length; i++){
       if(toSelectObject.options[i].selected == true){
           for(j=0; j<bakSelectObject.options.length; j++){
               if(toSelectObject.options[i].value == bakSelectObject.options[j].value){
                   canRemoveSrc = true;
                   break;
               }
           }
       }
       if(canRemoveSrc){
           break;
       }
   }
   removeSelected(toSelectObject);
   if(canRemoveSrc){
       removeAllOption(fromSelectObject);
       filterSrcWithBakSelect(bakSelectObject, fromSelectObject, toSelectObject);
   }
}

function removeSelected(selectObject){
    for(i=selectObject.options.length-1; i>=0; i--){
        if(selectObject.options[i].selected == true){
            selectObject.options.remove(i);
        }
    }
}

function removeAllOption(selectObject){
   for(i=selectObject.options.length-1; i>=0; i--){
       selectObject.options.remove(i);
   }
}

function filterSrcSelect(srcSelectObject, conSelectObject){
    for(i=0; i<conSelectObject.options.length; i++){
        for(j=0; j<srcSelectObject.options.length; j++){
            if(conSelectObject.options[i].value == srcSelectObject.options[j].value){
                srcSelectObject.options.remove(j);
            }
        }
    }
}

function filterSrcWithBakSelect(bakSelectObject, srcSelectObject, conSelectObject){
   for(i=0; i<bakSelectObject.options.length; i++){
       for(j=0; j<conSelectObject.options.length; j++){
           var ifExist = false;
           if(bakSelectObject.options[i].value == conSelectObject.options[j].value){
               ifExist = true;
               break;
           }
       }
       if(!ifExist){
           srcSelectObject.options[srcSelectObject.options.length] = new Option(bakSelectObject.options[i].text, bakSelectObject.options[i].value, 0, 0);
           srcSelectObject.options[srcSelectObject.options.length-1].style.background = bakSelectObject.options[i].style.background;
           srcSelectObject.options[srcSelectObject.options.length-1].style.color = bakSelectObject.options[i].style.color;
       }
   }
}

function doAllSelected(selectObject){
    for(i=0; i<selectObject.options.length; i++){
        selectObject.options[i].selected = true;
    }
}

function cancelAllSelected(selectObject){
    for(i=0; i<selectObject.options.length; i++){
        selectObject.options[i].selected = false;
    }
}

function changeGroup(){
}
</script>
</head>
<body>
<form method="post" name="form1" action="">
<table border="1" width="300">
<tr>
  <td width="40%">已选择</td>
  <td width="20%">&nbsp;</td>
  <td width="40%">
    <select name="group_select" onChange="changeGroup()">
      <option value="1001">中国</option>
      <option value="1002">janpig</option>
    </select>
  </td>
</tr>
<tr>
  <td>
    <select name="selected_charge_select" size="7" multiple ></select>
  </td>
  <td nowrap align="center">
    &nbsp;
    <input type="button" value="<< 选择" name="buttonAdd"  onClick="javascript:addOption(this.form.charge_list, this.form.selected_charge_select, -1)">
    &nbsp; <br><br>&nbsp;
    <input type="button" value="删除 >>" name="buttonDel"  onClick="javascript:deleteOption(this.form.charge_list, this.form.selected_charge_select,this.form.backup_charge_list);">
    &nbsp;
  </td>
  <td>
    <select name="charge_list" size="7" multiple>
      <option value="2001">北京</option>
      <option value="2002">沈阳</option>
      <option value="2003">上海</option>
      <option value="2004">武汉</option>
      <option value="2005">美国</option>
      <option value="2006">日本</option>
    </select>
    <div style="display:none">
    <select name="backup_charge_list" size="7">
      <option value="2001">北京</option>
      <option value="2002">沈阳</option>
      <option value="2003">上海</option>
      <option value="2004">武汉</option>
      <option value="2005">美国</option>
      <option value="2006">日本</option>
    </select>
    </div>
  </td>
</tr>
</table>
</form>
</body>
</html> 

wubai250
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
日常随笔：JS实现将一个元素从一个标签中移动到另一个标签中的简单方法
qq_24724109的博客
12-24 3712
使用 append 方法完成页面内元素的迁移 问题描述 要将一个元素target从一个标签(div1)中移动到另外一个标签(div2)中，应该怎么做呢 一般做法：先将target从div1中保存并从div1中将target删除，然后在div2中添加该元素 特殊做法: 今天发现直接append该target元素!!! 实验验证 <!DOCTYPE html> <html la...
JS 实现列表移动（JQuery实现）
zzvar的博客
05-29 2140
JS 实现列表移动学习内容：需求总结： 学习内容： 需求 用 JS 实现列表移动 实现代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>列表移动</title> <script type="text/javascript" src="/static/jQuery-1.11/jquery-
JS实现列表数据左右、上下移动功能
简约人生的博客
04-13 9628
本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能，支持多选移动。文章中提供了两种方案，一种是将左侧选中项复制到右边，左侧数据不发生变化，同时阻止数据重复添加到右侧；另一种是数据添加到右边的同时从左边移除，从右边移除的同时向左边追加，并对右侧列表数据实现了上下移动功能。 一、效果图 进行左右移动时，选定一项或多项点击添加或移除(按住shift或ctrl可以多选)，上下移动不支持多选...
鼠标拖动表格中的数据，表格美化（系列二）
黑色头发
08-13 216
效果图：表格上边的文字可以通过鼠标的拖拽到下边的表格内 代码： [code="html"] WebForm2 /*--------全局变量-----------*/ var x0...
JQUERY 在 ASP.NET C#,VB 中将项目从一个列表框移动到另一个列表框
m0_50971283的博客
04-25 413
第一个按钮用于将所选项目从第一个列表框移动到第二个列表框，第二个按钮用于将所有项目（无论是否选中）移动到第二个列表框，第三个按钮用于将所选项目移回第一个列表框，第四个按钮用于将所有项目移回第一个列表框。在处理 Asp.Net 项目时，得到了将项目从一个列表框移动到另一个列表框的要求，如上面的演示图像所示，这可以很容易地在服务器端和客户端完成。在本文中，将通过一个示例展示在 Asp.Net 中使用 jQuery 以及 C# 和 VB 在两个列表框控件之间移动单个或多个选定项目。
JavaScript如何实现组合列表框中元素移动效果
11-22
应用背景：在页面中有两个列表框，需要把其中一个列表框的元素移动到另一个列表框 。 　实现的基本思想： 　（1）编写init方法对两个列表框进行初始化； 　（2）为body添加onload事件调用init方法； 　（3）编写...
JavaScript控制两个列表框listbox左右交换数据的方法
12-09
本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下： 这个功能我们经常用到，将左边列表框的元素移动到右边，或者将右边列表框的元素移动到左边，可以一次性...
JavaScript如何实现组合列表框中元素移动效果_.docx
10-09
2. 使用 JavaScript 实现组合列表框中元素移动效果：需要编写 init 方法对两个列表框进行初始化，并编写 move 和 moveAll 函数将选中的选项移到另一个列表框中。 3. 使用 selectedIndex 属性获取当前选中的选项：...
javascript实现的左右选择框效果代码
10-30
标题中的“javascript实现的左右选择框效果代码”指的是在网页设计中使用JavaScript语言来创建一种交互式的用户界面，其中包含两个选择框（通常称为选择列表或下拉菜单），一个位于左边，另一个位于右边。...
前端之下拉列表项的转移（通过一个函数传参实现）
生活难免落俗，浪漫至死不渝。
08-12 761
今天带来的是js实现的下拉列表项的转移，其中有两个特别需要注意的地方，一个是在按钮中调用函数时参数的传递，一个是表单对象的name可不可以当作参数传递。 首先我把代码给出：（直接复制就可以测试效果了） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;...
基于纯js是实现的能够在上下两个列表框及数据项位置移动的程序代码
10-29
基于纯js是实现的能够在上下两个列表框移动位置以及改变数据项上下位置的程序代码。
js两个列表框操作案例
08-28
有两个例子 一个是两个文本框之间值的对换,类似于招聘网的添加应聘职位对另一个文本框中 还有一个就是级联列表值,类似于省市县三级的级联列表
js拖动元素从一个位置到另一个位置（vuedraggable）的使用
reembarkation的博客
08-19 2343
vue项目中拖拽元素从一个div到另外一个div中的实现
js中前台数据左右切换移动
ghjzzhg的博客
01-16 941
左右移动或者上下移动都一样，核心思想就是左边对象获取右边的id script type="text/javascript"> // 先注册整个文件加载完成之后的事件 window.onload = function() { //通过id属性值获取add标签对象 var addButton = document.getElementById("add"); // 动态给这个addBu
js实现两个列表框交换数据
h183288132的专栏
05-31 3273
JavaScript：两个可以互相交换数据的列表框 分类： JavaScript2012-07-11 15:28 1344人阅读 评论(4) 收藏 举报 javascriptbuttonhtmlinputfunction 还是那位博主的一篇关于JavaScript js 左右移动下拉列表选项的文章，我也用自己的方法实现了一下，感觉还是使用js原生的方法比较方便、简单。
点击下拉列表值动态加载另外一个下拉列表
陌子曦的专栏
05-21 527
1.jsp页面，定义2个下拉列表 <select type='text' onchange = "getData();" style='width:145px;' name='typeName1' id='typeName1'></select> <select type='text' style='width:145px;' name='typeName' id='typeName'></select> 2.获取数据列表 // 形成下拉框
HTML+Javascript复制表格行并清空form表单input/select值.
BRUNI (不如你) 's CSDN BLOG
02-24 3968
需求是这样的:数据库端是一对多(主表和从表), 要求页面上用一个表单输入完成. 还要能够动态增加输入行. 页面上, 需要解决的主要是下面两个问题:- 动态复制行, 追加到表格末尾- 对复制的行清空原有的输入 下面是一个测试页面:aaabbbaaabbb <!-- var maxRows = 5; f
用javascript，当单击“》”按钮时，将左边列边框里中选中的元素复制到右边，同时从左列表中消除
weixin_44638736的博客
01-02 347
用javascript，当单击“》”按钮时，将左边列边框里中选中的元素复制到右边，同时从左列表中消除
Javascript 实现复制（Copy）动作大全
LuckyWinty的博客
11-16 1407
来源 | https://www.liqingbo.cn/blog-1412.html1、实现点击按钮，复制文本框中的的内容<script type="text/javas...
layui 穿梭框数据交互
最新发布
04-03
layui 穿梭框（Transfer）是一个用于在两个列表之间移动数据的组件。它可以通过前后端的交互来获取和更新数据。下面是两种实现数据交互的方法： 1. 后端获取数据：通过后端接口获取数据，并将数据传递给穿梭框组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值