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

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/407962.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

函数模板(参考《C++ Templates 英文版第二版》)

函数模板(参考《C++ Templates 英文版第二版》)

函数编程(参考《C Templates 英文版第二版》) Chapter 1 函数模板 1.1 一窥函数模板 template<class T> T max(T a, T b) {return b < a ? a : b; }#include "max1.hpp" #include <iostream> #include <string> #include <format>int…
阅读更多...
前端学习（3248）：react的脚手架文件

前端学习（3248）：react的脚手架文件

阅读更多...
Android FTP Server 1

Android FTP Server 1

下面介绍几种Android 版本的FTP Server : virtualdataline Virtual Data Line is a software that you can manage files of the phone on you pc without data line . Phone files can be copied to a computer and computer files can copied to the phone. With this …
阅读更多...
Switcher ---Vista Areo 工具

Switcher ---Vista Areo 工具

推荐一个Vista Areo主题工具Switcher.可以从这里 [url]http://insentient.net/[/url] 获取 自由、创新、研究、探索…… 转载于:https://blog.51cto.com/shanyou/74271
阅读更多...
很好的测试智商看看你能回答出来多少?一共75道!!

很好的测试智商看看你能回答出来多少?一共75道!!

【1】假设有一个池塘&#xff0c;里面有无穷多的水。现有2个空水壶&#xff0c;容积分别为5升和6升。问题是如何只用这2个水壶从池塘里取得3升的水。 【2】周雯的妈妈是豫林水泥厂的化验员。 一天&#xff0c;周雯来到化验室做作业。做完后想出去玩。 "等等&#xff0c;妈…
阅读更多...
react（84）--多张图片

react（84）--多张图片

<Form.Item label"上传封面图片"><BaseUploadImageonRef{(ref) > {this.upload ref;}}value{coverPaths}multiple/></Form.Item>
阅读更多...
【ES实战】Elasticsearch6开始的CCR

【ES实战】Elasticsearch6开始的CCR

【ES实战】学习使用Elasticsearch6开始的CCR 本文涉及官网文章地址 OverviewRequirements for leader indicesAutomatically following indicesGetting started with cross-cluster replicationUpgrading clusters CCR > Cross-cluster replication 文章目录 【ES实战】学…
阅读更多...
可变参数模板(参考《C++ Templates 英文版第二版》)

可变参数模板(参考《C++ Templates 英文版第二版》)

可变参数模板(参考《C Templates 英文版第二版》) Chapter 4 可变参数模板 自从C11,模板可以接受可变数量的参数 4.1 可变参数模板 可以定义模板,去接受无限数量的模板参数 这种行为的模板叫做可变参数模板 4.1.1 例子 #include <iostream>template<typename T…
阅读更多...
Curiously Recurring Template Pattern奇怪的模板递归 --- C++20

Curiously Recurring Template Pattern奇怪的模板递归 --- C++20

Curiously Recurring Template Pattern 奇怪的模板递归 — C20 我们都知道C有静态多态和动态多态,动态多态通过虚函数表实现,他的缺点就是对效率产生一点点影响 可以用CRTP解决这个问题 我们先举一个动态多态的例子: #include <iostream> using namespace std;class …
阅读更多...
关于table的中元素对齐方式的注意点

关于table的中元素对齐方式的注意点

情形一&#xff1a;<td></td>中嵌套了div或table元素。 1。td中的内部元素(如div)设置了height属性&#xff0c;td中设置了vertical-align的情况下&#xff0c;在IE中&#xff0c;td的vertical-align不起作用&#xff0c;但在firefox中是起作用的。 2。如果td中未…
阅读更多...
不要带我去看鱼了

不要带我去看鱼了

我在企业里面上班。每天中午都得回家吃午饭。儿子才3岁。每每见我总是要我抱&#xff0c;我经常出差什么的&#xff0c;儿子都怕我走了。每次我要离开的时候&#xff0c;只好让老婆抱着儿子遮住&#xff0c;让我悄悄地离开。儿子便猛哭。老婆只好带着儿子到家门口的池塘旁边去看…
阅读更多...
前端学习（3249）：react的文件src

前端学习（3249）：react的文件src

阅读更多...
char 与 String 相等比较

char 与 String 相等比较

这是一个相当2 相当基础 相当没有意义的帖子&#xff1b;但今天因为这个问题引发了一个bug。小细节也很重要&#xff01;&#xff01;&#xff01; char a1;// char b2dsf; //char 表示单个字符 char c1; //不需要单引号也能表示// System.out.println(a.equals(&q…
阅读更多...
我眼中的金蝶ERP

我眼中的金蝶ERP

在我的博克回复里&#xff0c;有个小雨的博友问我是否了解金蝶ERP&#xff0c;我答应给她说说金蝶ERP&#xff0c;所以就有了这份文章。在我们国内&#xff0c;最出名的或者说市场占有率前两位的就是用友和金蝶了。至于到底谁排名先排名后一点&#xff0c;这不是我想说的范围。…
阅读更多...
前端学习（3250）：一个简单的文件

前端学习（3250）：一个简单的文件

阅读更多...
什么是JDO

什么是JDO

From: http://blog.csdn.net/wp_84/archive/2007/09/02/1769481.aspx Java数据对象(Java Data Objects,JDO)是一个应用程序接口(API),它是Java程序员能够间接地访问数据库,也就是说,不需使用直接的结构化查询语言(SQL)语句.JDO是作为Java数据库连接(JDBC)的一个补充来介绍的,而…
阅读更多...
PROJECT #0 - C++ PRIMER [CMU 15-445645]笔记

PROJECT #0 - C++ PRIMER [CMU 15-445645]笔记

PROJECT #0 - C PRIMER [CMU 15-445/645]笔记 这是数据库领域的一门课程, 由卡内基梅隆大学副教授Andy Pavlo授课, 目前在网上有授课视频资料、实验以及配套的在线测评环境 (限时开放至2021年12月31日) 环境: wsl2 Clion Project #0 - C Primer 还是很简单的,主要目的是让…
阅读更多...
简单JS实现对表的行的增删

简单JS实现对表的行的增删

这段代码非常的简单&#xff0c;仅仅作为自己的一个小小的记录&#xff01; ok&#xff0c;先上一个简单的图例&#xff0c;效果如下&#xff08;注意&#xff1a;这只是一个简单的例子&#xff0c;不过可以根据这个简单的例子&#xff0c;变化出更为复杂的效果&#xff09;&am…
阅读更多...
前端学习（3251）：样式的模块化

前端学习（3251）：样式的模块化

阅读更多...
用 JavaScript 操作字符串

用 JavaScript 操作字符串

虽然 JavaScript 有很多用处&#xff0c;但是处理字符串是其中最流行的一个。下面让我们深入地分析一下使用 JavaScript 操作字符串。在 JavaScript 中&#xff0c; String 是对象。 String 对象并不是以字符数组的方式存储的&#xff0c;所以我们必须使用内建函数来操纵它们的…
阅读更多...
最新文章

Copyright @ 2022~2023