在网页开发中，常常遇见这种问题，给定两个框，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. 关于Linux系统使用遇到的问题-1：vi 打开只读(readonly)文件如何退出保存？

    问题来源如下: 打开/etc/crontab文件,命令如下: yule@yule-ubuntu:~$ vi /etc/crontab  显示如下内容: # /etc/crontab: system-w ...

  2. html网页访问WebAPI中的方法遇到的问题

      1.移动端访问远程服务时,建议使用WebAPI 2.用不同浏览器访问WebAPI时返回的文本格式是不同的,Chrome Firefox将在浏览器中以XML形式显示此列表,IE浏览器将获得Json格 ...

  3. wx.grid.Grid

    # -*- coding: cp936 -*- import wx import wx.grid import wx.lib.gridmovers as gridmovers import pymss ...

  4. 订阅无法在 ARM 模式下创建虚拟机，只能在 ASM 模式下创建 Azure VM 部署

    问题描述 资源组所有者可以在新版 portal 创建经典模式的虚拟机,但是无法创建 ARM 模式的虚拟机. 问题现象 环境中有个相对权限比较高的账户,比如 account admin (以下简称为 A ...

  5. JS支持可变参数(任意多个)

    <script type="text/javascript"> function abc(){ //js中有个变量arguments,可以访问所有传入的值 for(va ...

  6. 7 - py面向对象一条龙服务

    Python从设计之初就已经是一门面向对象的语言,在python里所有东西皆是对象. 下面通过一个实例来说明什么是面向对象. 引子 你是一家公司的员工,公司现在要开发一款“人狗战争”的游戏,人狗战争肯 ...

  7. SAP订单编排和流程增强概述

    SAP产品里的订单处理,无论是On-Premises解决方案还是云产品,我认为归根到底可以概括成四个字:订单编排,包含两个层次的内容: 1. 单个订单通过业务流程或者工作流驱动的状态迁移: 2. 多种 ...

  8. JVM 虚拟机内存深入探究

    [<深入理解java虚拟机>-整理笔记] by  lijun JVM虚拟机内存逻辑模型: 方法区(全局变量 静态数据 常量等) 线程共享 堆栈区(对象实例 数组数据 new generat ...

  9. [18/11/22] 将点分十进制的IP地址化成二进制输出

    #include <stdio.h> void binary(int d){ ,j,n,b[]={}; ){ n=d%; d=d/; b[i++]=n; //不停的除2,余数保存在b[8] ...

  10. 【luogu P2936 [USACO09JAN]全流Total Flow】 题解

    题目链接:https://www.luogu.org/problemnew/show/P2936 菜 #include <queue> #include <cstdio> #i ...