将select中的项从一个移动到另一个select中

最新推荐文章于 2021-01-27 18:08:42 发布
最新推荐文章于 2021-01-27 18:08:42 发布
阅读量1.3k 收藏
点赞数
分类专栏： Web Develop 文章标签： button border input table xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JoeBlackzqq/article/details/2779445
版权

<!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>
    <title>将select中的项互相移动(添加或移除)</title>
 <script language="javascript" type="text/javascript">

  function execSelectGroup(tagContentID, flag)
  {
      var obj = document.getElementById(tagContentID).getElementsByTagName("select");
      var i, j, moveFrom, moveTo;
      if(flag == 1 || flag == 2)                  //全部添加或添加
      {
          moveFrom = obj[0];                      //availableGroups           
          moveTo = obj[1];                        //selectedGroups
      }
      else if(flag == 3 || flag == 4)             //删除或全部删除
      {
          moveFrom = obj[1];
          moveTo = obj[0];
      }
     
      for(i = 0; i < moveFrom.length;)
      {
          var op = moveFrom.options[i];
          if(flag == 1 || flag == 4 || moveFrom.options[i].selected)  //全部添加或移除
          {
              var newOption = document.createElement("option");
              newOption.value = op.value;
              newOption.text = op.text;
              moveTo.options.add(newOption);      //增加一个
              moveFrom.remove(i);
          }
             else
                 i++;
      }
  }
 </script>
</head>

<body>
 <div id="addAccount_tagContent3" class="tagContent">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
   <td>
       <fieldset>
        <legend>组信息</legend>
     <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center">
       <tr>
      <td style="width:40%;text-align:center;">
       可选组
      </td>
      <td>&nbsp;
       
      </td>
      <td style="width:40%;text-align:center;">
       已选组
      </td>
       </tr>
       <tr>
      <td style="width:40%;text-align:center;">
       <select name="availableGroups" size="10" style="width:120px;" multiple>
        <option value="1">可选组一</option>
        <option value="2">可选组二</option>
        <option value="3">可选组三</option>
       </select>
      </td>
      <td align="center">
       <input type="button" name="selectAll" value=">>" style="width:35px; height:18px; margin-bottom:2px;" title="全部添加" οnclick="execSelectGroup('addAccount_tagContent3', 1)" /><br/>
       <input type="button" name="addThis" value=">" style="width:35px; height:18px; margin-bottom:2px;" title="添加" οnclick="execSelectGroup('addAccount_tagContent3', 2)" /><br/>
       <input type="button" name="deleteThis" value="<" style="width:35px; height:18px; margin-bottom:2px;" title="删除" οnclick="execSelectGroup('addAccount_tagContent3', 3)" /><br/>
       <input type="button" name="deleteAll" value="<<" style="width:35px; height:18px; margin-bottom:2px;" title="全部删除" οnclick="execSelectGroup('addAccount_tagContent3', 4)" /><br/>
      </td>
      <td style="width:40%;text-align:center;">
       <select name="selectedGroups" size="10" style="width:120px;" multiple>
        <option value="1">已选组一</option>
        <option value="2">已选组二</option>
        <option value="3">已选组三</option>
        <option value="4">已选组四</option>
       </select>
      </td>
       </tr>
     </table>
       </fieldset>
   </td>
    </tr>
  </table>
 </div>
 <div id="editAccount_tagContent3" class="tagContent">
     <table width="600" border="0" cellspacing="0" cellpadding="5">
       <tr>
      <td>
          <fieldset>
           <legend>组信息</legend>
        <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center">
          <tr>
         <td style="width:40%;text-align:center;">
          可选组
         </td>
         <td>&nbsp;
          
         </td>
         <td style="width:40%;text-align:center;">
          已选组
         </td>
          </tr>
          <tr>
         <td style="width:40%;text-align:center;">
          <select name="availableGroups" size="10" style="width:120px;" multiple>
           <option value="1">可选组一</option>
           <option value="2">可选组二</option>
           <option value="3">可选组三</option>
           <option value="4">可选组四</option>
           <option value="5">可选组五</option>
          </select>
         </td>
         <td align="center">
          <input type="button" name="selectAll" value=">>" style="width:35px; height:18px; margin-bottom:2px;" title="全部添加" οnclick="execSelectGroup('editAccount_tagContent3', 1)" /><br>
          <input type="button" name="addThis" value=">" style="width:35px; height:18px; margin-bottom:2px;" title="添加" οnclick="execSelectGroup('editAccount_tagContent3', 2)" /><br>
          <input type="button" name="deleteThis" value="<" style="width:35px; height:18px; margin-bottom:2px;" title="删除" οnclick="execSelectGroup('editAccount_tagContent3', 3)" /><br>
          <input type="button" name="deleteAll" value="<<" style="width:35px; height:18px; margin-bottom:2px;" title="全部删除" οnclick="execSelectGroup('editAccount_tagContent3', 4)" /><br>
         </td>
         <td style="width:40%;text-align:center;">
          <select name="selectedGroups" size="10" style="width:120px;" multiple>
           <option value="1">已选组一</option>
           <option value="2">已选组二</option>
          </select>
         </td>
          </tr>
        </table>
          </fieldset>
      </td>
       </tr>
     </table>
    </div>
</body>
</html>

JoeBlackzqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在select子句里如何实现另一个select语句的查询|在select子句里用逗号隔开的每个项的本质是一个表达式
haiross的专栏
10-15 1万+
在select子句里能支持另一个select语句的实现形式如下（即要配合case when关键字）： select case when lock_purpost in(SELECT id from data_dictionary) then (SELECT name from data_dictionary where id=lock_purpost)  else lock_pur
从一个select到另一个select
05-24
NULL 博文链接：https://zxlj2ee.iteye.com/blog/360213
将一个select中的内容移动到另一个select中
weixin_34326429的博客
07-06 315
<divclass="centent"> <selectmultipleid="select1"style="width:130px;height:180px;"> <optionvalue="1">孙克杰</option> <optionvalue="2">朱信宗</option&...
权限选择功能从一个select到另一个select
老白干的zone
02-10 1201
javascript代码： function movesome(selectSrc, selectTar) {//selectSrc为源对象，selectTar为目标对象 for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) { var option = selectSrc.childNodes[i]; if (option.select
从一个select中选中若干项到另一个select中
Morecans的专栏
07-06 1295
最近没有什么事做,看到我们前一阵子在南航电子商务做的Feinar项目中有个js做的效果还不错,拿出来研究了一番,发现那个实现的方法实在是太糟糕了,转一七找一八的,才算勉强实现了两个列表框Select的选项Option交换,实在是叫人看着心急，不就这么个简单的功能么，怎么写了他妈的十来个函数呢？于是乎，自己动手写了如下的两个函数，应该说完全满足需要，完全实现了功能。在网上也看到过类似的帖子，（两个s
sql将一个表中的数据插入到另一个表中的方法
12-15
在SQL中，将一个表中的数据插入到另一个表中是一种常见的操作，这通常涉及到数据迁移、备份或数据整合。此过程可以通过`INSERT INTO SELECT`语句实现，它允许您从一个源表中选择数据并将其插入到目标表中，即使两个...
两个select多选模式的选项相互移动(示例代码)
09-04
`copyToList`函数用于将从一个`select`元素（"from"）中选中的选项复制到另一个`select`元素（"to"）。它首先检查目标`select`是否已经有选项，如果有且第一个选项的值为"temp"，则清空该列表。接着，遍历源`select`...
select下拉框支持搜索【中文搜索】文件
06-16
在网页设计和开发中，`select` 下拉框是一个常见的元素，用于用户选择预设的选项。然而，当选项数量庞大或包含大量中文文本时，传统的`select`下拉框可能无法满足用户友好的交互需求。为了提升用户体验，我们可以...
JavaScript实现两个select下拉框选项左移右移
10-20
主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js 从一个select选择数据添加到另一个select(包括移除)
南来北往的客
05-19 2260
js 从一个select选择数据添加到另一个select(包括移除)
把一个select 中选中项移到另一个select中
01-06 3129
aaa     bbb     ccc     ddd >>>" onclick="moveOptions('role_list','role_list_to')"/>     eee     fff //把一个select 中的项移到另一个select中 function moveOptions(from,to){     var oldna
用js实现两个select下拉框之间的元素互相移动
sweetllh的博客
04-25 1748
Javascript代码 <script type="text/javascript"> /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getEleme
mysql select 1 from_mysql select 1
weixin_36379666的博客
01-27 572
看数据库连接池源码，发现连接池的参数validationQuery(SQL查询,用来验证从连接池取出的连接)设置的值为"SELECT 1"，之前很少用这种写法，于是google一下，总结如下:以seven_user表为例，如下是建表语句：CREATE TABLE `smily_test` (`id` int(11) NOT NULL AUTO_INCREMENT,`version` int(4) ...
javascript实现两个select选择框内容动态绑定
热门推荐
xuelangcxy的专栏
07-26 1万+
1. 有时候需要实现当用户选择一个选项之后，网页上另一部分的内容就随之变化，达到动态更新的目的，这时候我们就会想到ajax来实现局部刷新，接下来用一个简单的例子演示：总共有两个select选择框，第一个是省份的选择，第二个是对应省份的城市的选择，目标是实现当用户切换省份的时候，城市选择框中的选项全部替换为对应省份的城市： 对应的html代码，主体就是两个选择框 请选择省份
SQLSERVER将一个文件组的数据移动到另一个文件组
最新发布
09-24
要将SQL Server中的一个文件组的数据移动到另一个文件组，可以按以下步骤操作： 1. 首先，确保要移动数据的文件组和目标文件组已经创建，并且具有足够的空间来容纳要移动的数据。 2. 使用ALTER DATABASE语句，将要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值