在网页开发中，常常遇见这种问题，给定两个框，A和B，和几个图片按钮，A中存在几个操作，点击图片按钮，填加至B中，或者从B中移除等，这种效果如何实现，本文加以总结。

几种效果图如下：

原始图：                                                                                                                 添加全部功能图： 　　　　　　　　　　　　　　　　　　　　　　　　　　　　  移除全部功能图：

                                                                        

添加选中功能图：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 

移除选中功能图：

实现思路：

1、首先要做出这种效果图，借助的标签的select标签，select标签设置高度，同时设置该标签的multiple属性---------->multiple="multiple"，该属性两个作用，①显示全部的信息②允许多选

2、给各个按钮注册点击事件，

3、添加全部功能

在点击事件中，利用element.children获得第一个select标签中所有元素option，遍历所有的元素option,利用element.appendChild()方法，将遍历到的option添加至第二个select，需要注意的是，element.appendChild()会将待插入的元素从原位置移除，插入到新位置，这样会伴随原select中元素的索引变化，导致功能添加有遗漏，需要注意，代码中已经添加了解决办法，可以每次都获取第一个元素option添加，或者每次在for循环内让i--

4、移除全部功能

原理与3类似，不做赘述

5、添加选中功能

在点击事件中，遍历第一个select中的元素，创建临时数组，如果select元素被选中，则被push（）进临时数组中，再遍历临时数组，利用element.appendChild()将元素添加至第二个select中。这样利用数组目的是为了让选中项不至于倒序。

6、移除选中功能

原理与5类似，不做赘述

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>功能框的移出与添加</title>

         <!-- 给两个下拉框添加样式 -->

         <style type="text/css">

             select{

                 height: 200px;

                 width: 150px;

             }

         </style>

     </head>

     <body>

         <!-- 定义所有功能框 -->

         <select id="allFuntionBox" multiple="multiple">

             <option value ="0">关羽</option>

             <option value ="1">张飞</option>

             <option value ="2">赵云</option>

             <option value ="3">马超</option>

             <option value ="4">黄忠</option>

             <option value ="5">魏延</option>

             <option value ="6">严颜</option>

             <option value ="7">关平</option>

             <option value ="8">周仓</option>

         </select>

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

         <!-- 定义需要功能框 -->

         <select id="CheckFuntionBox" multiple="multiple">

         </select>

         <br/><br/>

         <input type="button" id="btn_addAll" value="添加全部功能" />

         <input type="button" id="btn_addChecked" value="添加选中功能" />

         <input type="button" id="btn_RemoveAll" value="移除所有功能" />

         <input type="button" id="btn_RemoveChecked" value="移除选中功能" />

         <!-- 插入JS代码 -->

         <script type="text/javascript">

             // 准备工作

             // 获取两个select标签以及四个按钮

             var allFuntionBox=document.getElementById('allFuntionBox');

             var CheckFuntionBox=document.getElementById('CheckFuntionBox');

             var btn_addAll=document.getElementById('btn_addAll');

             var btn_addChecked=document.getElementById('btn_addChecked');

             var btn_RemoveAll=document.getElementById('btn_RemoveAll');

             var btn_RemoveChecked=document.getElementById('btn_RemoveChecked');

             //1.添加全部功能按钮

             btn_addAll.onclick=function(){

                 for(var i=0;i<allFuntionBox.children.length;){

                     var option=allFuntionBox.children[i];

                     CheckFuntionBox.appendChild(option);

                 }

             }

             //2.移除全部功能

             btn_RemoveAll.onclick=function(){

                 for(var i=0;i<CheckFuntionBox.children.length;){

                     var option=CheckFuntionBox.children[i];

                     allFuntionBox.appendChild(option);

                 }

             }

             //3.添加选中功能

             btn_addChecked.onclick=function(){

                 var temp=[];//定义数组,存放选中的项目

                 for(var i=0;i<allFuntionBox.children.length;i++){

                     var option=allFuntionBox.children[i];

                     if(option.selected){

                         temp.push(option);

                         option.selected=false;

                     }

                 }

                 for(var i=0;i<temp.length;i++){

                     CheckFuntionBox.appendChild(temp[i]);

                 }

             }

             //4.移除选中功能

             btn_RemoveChecked.onclick=function(){

                 var temp=[];

                 for(var i=0;i<CheckFuntionBox.children.length;i++){

                     var option=CheckFuntionBox.children[i];

                     if(option.selected){

                         temp.push(option);

                         option.selected=false;

                     }

                 }

                 for(var i=0;i<temp.length;i++){

                     allFuntionBox.appendChild(temp[i]);

                 }

             }

         </script>

     </body>

 </html>

javascript--select标签的添加删除功能的使用的更多相关文章

  1. NGUI-为Popuplist的下拉选项添加删除功能

    NGUI例子里的popuplist是这样的:,但有时我们希望下拉选项都有删除功能,也就是这样:,一种方法是改popuplist的源码,我想这个实现起来不难,但现在我想说的是用反射来实现此功能,以及其他 ...

  2. jqGrid添加删除功能(不和数据库交互)

    jqGrid添加删除功能(不和数据库交互) 一.背景需求 项目中需要在前端页面动态的添加行,删除行,上下移动行等,同时还不和数据库交互.一直在用jqGrid展示表格的我们,从没有深入的研究过它,当然看 ...

  3. javascript select标签的操作

    用原生的方法对select标签的增删操作 1.选中某一个option,一般采用 option[i].selected  = true 2.添加option首先需要创建一个option的节点,然后插入到 ...

  4. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  5. 多选select实现左右添加删除

    案例:实现效果 1.选择监控城市,车辆列表显示对应城市所有车辆 2.从左边选择车辆  单击  >>   实现右侧显示添加车辆 ,左侧对应移除已选择车辆 3.右侧选中车辆     单击 &l ...

  6. JavaScript在div后添加删除div

    var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !== ...

  7. JavaScript 原生控制元素添加删除

    参考: https://blog.csdn.net/leijie0322/article/details/80664554 https://www.cnblogs.com/jpfss/p/910620 ...

  8. javascript——select 标签的使用

    <% String state = (String) request.getAttribute("state"); String day = (String) request ...

  9. 在select标签中添加a标签

    <!--第一个选项不能写连接--> <select id="" onchange="window.location=this.value"&g ...

随机推荐

  1. vue使用qrcode生成二维码，可以自定义大小

    1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo.只支持像素大小的二维码 2,qrcode支持移动端自定义大小二维码 &quo ...

  2. yanxin8文章归档

    文章归档 - 2015年四月 (共21篇文章) 26日: 14443协议的CRC_A和CRC_B (0条评论) 25日: 百度钱包-1分钱5元话费 (0条评论) 22日: 驾照考试总结 (0条评论) ...

  3. 01_Redis基础

    [Redis定义(参考了百度百科)] Redis是一个key-value存储系统.与Memchached类似,Redis支持的value类型更多,包括String.list.set.zset(有序集合 ...

  4. 【Linux】Linux 找回Root用户密码

    Root密码破解 Linux 忘记Root密码 ? 技术学习基本原则:不作恶 一.破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单按e进入编辑模式 3.编辑kernel那行添加/ ...

  5. JavaScript性能优化小知识总结(转)

    JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...

  6. jetbrain rider 逐渐完美了，微软要哭了么？

    2019-03-24 10:08:42 多年的vsiual studio使用经验,各种小瑕疵:到现在的visual studio是越来越大了:简直到了无法忍受境地: 每次重装系统都要重新安装下,这个不 ...

  7. Qt 窗口移动实现

    很多人觉得系统自带的标题栏太丑了,想要自绘一个标题栏,去掉了系统自带的标题栏后,就需要自己实现窗口移动,下面的代码就是实现窗口移动. widget.h #ifndef WIDGET_H #define ...

  8. NO.002-2018.02.07《越人歌》先秦：佚名

    参考之后略有修改,疑问点“不訾诟耻”释义 越人歌原文.翻译及赏析_古诗文网 蒙羞被好兮不訾诟耻_释义_吴江诗词网   越人歌 先秦:佚名 今夕何夕兮,搴舟中流.今晚是怎样的晚上啊河中漫游.搴(qiān ...

  9. 插上翅膀，让Excel飞起来——xlwings（二）

    在上一篇插上翅膀,让Excel飞起来——xlwings(一)中提到利用xlwings模块,用python操作Excel有如下的优点: xlwings能够非常方便的读写Excel文件中的数据,并且能够进 ...

  10. OC block声明和使用

    #import "Button.h" typedef int (^MySum) (int, int); void test() { // 定义了一个block,这个block返回值 ...