左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底

最新推荐文章于 2021-06-03 19:47:06 发布
最新推荐文章于 2021-06-03 19:47:06 发布
阅读量796 收藏
点赞数
分类专栏： 前段知识积累
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> Select列表框交换数据</TITLE>  
  5. </HEAD>  
  6. <style>  
  7.     center  
  8.     {  
  9.         font-size:12px;  
  10.         color:red;  
  11.         font-weight:bold;  
  12.     }  
  13.     select  
  14.     {  
  15.         font-size:12px;  
  16.         color:green;  
  17.     }  
  18. </style>  
  19. <BODY>  
  20.     <span id='feedback'></span>  
  21.       
  22.     <form method="post" name="myform">  
  23.   <table border="0" width="400">  
  24.  <tr>  
  25.   <td><CENTER>可选择排序方式</CENTER></td>  
  26.   <td> </td>  
  27.   <td><CENTER>已选择排序方式</CENTER></td>  
  28.  </tr>  
  29.     <tr>  
  30.       <td width="40%">  
  31.   <select  multiple name="left" id="left" size="8" style='width:200;'  
  32.   οndblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">  
  33.        <option value="20">ASP</option>  
  34.        <option value="30">PHP</option>  
  35.        <option value="40">ASP.NET</option>  
  36.        <option value="50">JSP</option>  
  37.        <option value="60">VB</option>  
  38.        <option value="70">DELPHI</option>    
  39.        <option value="80">AJAX</option>  
  40.        <option value="90">JQUERY</option>    
  41.   </select>  
  42.    </td>  
  43.       <td width="20%" align="center">  
  44.   <input type="button" value=" >> " οnclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>  
  45.   <input type="button" value=" << " οnclick="moveOption(document.getElementById('right'), document.getElementById('left'))">  
  46.    </td>  
  47.       <td width="40%">  
  48.   <select  multiple name="right" id="right" size="8" style='width:200;'  
  49.   οndblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">  
  50.   </select>  
  51.    </td>  
  52.     </tr>  
  53.  <tr>  
  54.   <td colspan="3">  
  55.   <CENTER>  
  56.   <INPUT TYPE="button" value="置顶" οnclick="moveTop(document.getElementById('right'));">  
  57.   <INPUT TYPE="button" value="上移" οnclick="moveUp(document.getElementById('right'));">  
  58.   <INPUT TYPE="button" value="下移" οnclick="moveDown(document.getElementById('right'));">  
  59.   <INPUT TYPE="button" value="置底" οnclick="moveBottom(document.getElementById('right'));">  
  60.   </CENTER></td>  
  61.  </tr>  
  62.   </table>  
  63.       
  64.    
  65. </BODY>  
  66. </HTML>  
  67. <SCRIPT LANGUAGE="JavaScript">  
  68. <!--  
  69.     //上移  
  70. 　   function moveUp(obj)  
  71. 　　{　  
  72. 　　　　　　for(var i=1; i < obj.length; i++)  
  73. 　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始  
  74. 　　　　　　　　if(obj.options[i].selected)  
  75. 　　　　　　　　{  
  76. 　　　　　　　　　　if(!obj.options.item(i-1).selected)  
  77. 　　　　　　　　　　{  
  78. 　　　　　　　　　　　　var selText = obj.options[i].text;  
  79. 　　　　　　　　　　　　var selValue = obj.options[i].value;  
  80.                         obj.options[i].text = obj.options[i-1].text;  
  81.                         obj.options[i].value = obj.options[i-1].value;  
  82.                         obj.options[i].selected = false;  
  83.                         obj.options[i-1].text = selText;  
  84.                         obj.options[i-1].value = selValue;  
  85.                         obj.options[i-1].selected=true;  
  86. 　　　　　　　　　　}  
  87. 　　　　　　　　}  
  88. 　　　　　　}  
  89. 　　　　}  
  90.         //下移  
  91.         function moveDown(obj)  
  92. 　　　　{  
  93. 　　　　　　for(var i = obj.length -2 ; i >= 0; i--)  
  94. 　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始  
  95. 　　　　　　　　if(obj.options[i].selected)  
  96. 　　　　　　　　{  
  97. 　　　　　　　　　　if(!obj.options[i+1].selected)  
  98. 　　　　　　　　　　{  
  99. 　　　　　　　　　　　　var selText = obj.options[i].text;  
  100. 　　　　　　　　　　　　var selValue = obj.options[i].value;  
  101.             obj.options[i].text = obj.options[i+1].text;  
  102.             obj.options[i].value = obj.options[i+1].value;  
  103.            obj.options[i].selected = false;  
  104.           obj.options[i+1].text = selText;  
  105.           obj.options[i+1].value = selValue;  
  106.          obj.options[i+1].selected=true;  
  107. 　　　　　　　　　　}  
  108. 　　　　　　　　}  
  109. 　　　　　　}  
  110. 　　　　}  
  111.         //移动  
  112.         function moveOption(obj1, obj2)  
  113.         {  
  114.              for(var i = obj1.options.length - 1 ; i >= 0 ; i--)  
  115.              {  
  116.                  if(obj1.options[i].selected)  
  117.                  {  
  118.                     var opt = new Option(obj1.options[i].text,obj1.options[i].value);  
  119.                     opt.selected = true;  
  120.                     obj2.options.add(opt);  
  121.                     obj1.remove(i);  
  122.                 }  
  123.              }  
  124.         }  
  125.         //置顶  
  126.       function  moveTop(obj)   
  127.       {   
  128.             var  opts = [];   
  129.             for(var i =obj.options.length -1 ; i >= 0; i--)  
  130.             {  
  131.                 if(obj.options[i].selected)  
  132.                 {  
  133.                     opts.push(obj.options[i]);  
  134.                     obj.remove(i);  
  135.                 }  
  136.             }  
  137.             var index = 0 ;  
  138.             for(var t = opts.length-1 ; t>=0 ; t--)  
  139.             {  
  140.                 var opt = new Option(opts[t].text,opts[t].value);  
  141.                 opt.selected = true;  
  142.                 obj.options.add(opt, index++);  
  143.             }  
  144.         }   
  145.       //置底  
  146.       function  moveBottom(obj)   
  147.       {   
  148.             var  opts = [];   
  149.             for(var i =obj.options.length -1 ; i >= 0; i--)  
  150.             {  
  151.                 if(obj.options[i].selected)  
  152.                 {  
  153.                     opts.push(obj.options[i]);  
  154.                     obj.remove(i);  
  155.                 }  
  156.             }  
  157.              for(var t = opts.length-1 ; t>=0 ; t--)  
  158.             {  
  159.                 var opt = new Option(opts[t].text,opts[t].value);  
  160.                 opt.selected = true;  
  161.                 obj.options.add(opt);  
  162.             }  
  163.         }   
  164.     //-->  
  165. </SCRIPT>  
雪地里的白开水1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS控制下拉列表左右选择实例代码
11-21
使用JS控制下拉列表左右选择 需求分析 在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品 技术分析 ondblclick=”selectOne()”：双击事件 select标签的属性multiple=”multiple”： 代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 步骤分析 1. 确定事件: 点击事件 :onclick事件 2. 事件要触发函数 selectOne 3. se
js实现的下拉菜单的左右移动
maozhuxigood
03-08 279
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
JavaScript js 左右移动下拉列表选项
weixin_30289831的博客
07-20 64
最开始想每个方法中用一个循环搞定，后来发现循环删除后。options的索引和集合就发生了变化，删除就不成功。有时候还出现selected为空的现象，2个循环就over了； <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <ti...
js实现-下拉列表左右选择
weixin_30487201的博客
10-29 123
下拉列表左右选择 * 下拉选择框 <select> <option>111</option> <option>111</option> </select> ...
25.用js和jquery实现下拉列表的左右选择
weixin_30412167的博客
02-23 75
<!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> <...
JavaScript控制两个列表框listbox左右交换数据的方法
12-09
在某些情况下，我们可能需要实现两个列表框之间的数据交换功能，比如用户可以选择将一个列表中的项移动到另一个列表。本文介绍的`listbox_moveacross`函数就是一个实现这种功能的JavaScript方法。 首先，让我们详细...
JavaScript Select和Option列表元素上下左右移动
10-30
JavaScript Select和Option列表元素上下左右移动 在这个资源中，我们将要讨论如何使用 JavaScript 实现 Select 和 Option 列表元素的上下左右移动功能。这个功能支持一次选中多项在左右列表中来回移动，非常适合在...
select框左右数据交换
09-26
功能强大，编写简单，易于看懂，左右两个select框进行数据交换。支持多选交换以及排序功能，需要的童鞋可以下载一试
Select列表框交换数据
11-18
左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底
两个select 框的数据移动
05-29
通过以上步骤，我们可以构建一个功能完备的“两个select框的数据移动”功能。实际开发中，根据具体需求和技术栈，可以对这些步骤进行调整和优化。同时，文件名`select_move_lift_right`可能暗示着这个示例着重于从左...
JQuery实现select互换数据和上下移动
09-30
功能类似struts2 optiontransferselect 标签的jquery组件 非常好用的一个JQuery组件
html js点击下拉菜单代码,JavaScript下拉菜单功能实例代码
weixin_29973493的博客
06-03 1710
本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：下拉菜单body,ul,li {margin: 0;padding: 0;font-size: 13px;}ul,li {list-style: none;}#divselect {width: 186px;margin: 80px auto;position: relative;z-index: 10000;}#divsele...
JavaScript人机交互
AlbertYang的博客
11-25 5678
文章目录导航0. 轮播图自动播放需求:技术分析:步骤分析:1. 完成页面定时弹出广告1.1 需求分析1.2 技术分析1.3 步骤分析1.4 代码实现1.5扩展2. 完成完成表单的校验2.1 需求分析2.2 技术分析2.3 步骤分析2.4 代码实现3.表格隔行换色3.1 需求分析3.2 技术分析3.3 步骤分析3.4 代码实现4. 复选框的全选和全不选4.1 需求分析4.2 技术分析4.3 步骤分析...
JS实现列表数据左右、上下移动功能
简约人生的博客
04-13 9638
本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能，支持多选移动。文章中提供了两种方案，一种是将左侧选中项复制到右边，左侧数据不发生变化，同时阻止数据重复添加到右侧；另一种是数据添加到右边的同时从左边移除，从右边移除的同时向左边追加，并对右侧列表数据实现了上下移动功能。 一、效果图 进行左右移动时，选定一项或多项点击添加或移除(按住shift或ctrl可以多选)，上下移动不支持多选...
用js实现两个select下拉框之间的元素互相移动
yuxingxing198812的专栏
11-25 3383
今天闲着没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。 /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getElementById("first");
Javascript: 两个列表框之间移动数据
天天成长的博客
09-11 357
http://topic.csdn.net/t/20020527/15/756343.html [code="js"] 1 2 3 4 5 6 7 8 ...
两个多选框(select)之间值的左右上下移动
12-12 876
两个多选框(select)之间值的左右上下移动     两个多选框（select）之间值的左右上下移动的代码请参考：               MultiSelects     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">               $（function（）{     $（
sql中两个数据集上下合并，不能使用union all 和union 还可以用什么方式
最新发布
07-28
如果您不能使用 UNION ALL 或 UNION 运算符来合并两个数据集，还有其他几种方式可以实现数据集的上下合并。 1. 使用子查询： 您可以使用两个独立的 SELECT 语句来获取两个数据集，并将它们作为子查询来合并。以下...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值