双击任一Select控件，查看效果：

srcA
srcC
srcB
targetC
targetB
targetA

 

源码：

<html>

<head>

    <script>

        function removeItem(){

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

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

            for(var i=;i<sltSrc.options.length;i++)

            {

                var tempOption=sltSrc.options[i];

                if(tempOption.selected){

                    sltSrc.removeChild(tempOption);

                    sltTarget.appendChild(tempOption);

                }    

            }

        }

        function addItem(){

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

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

            for(var i=;i<sltTarget.options.length;i++)

            {

                var tempOption=sltTarget.options[i];

                if(tempOption.selected){

                    sltTarget.removeChild(tempOption);

                    sltSrc.appendChild(tempOption);

                }    

            }

        }

        function showSelectOptions(){

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

            var myhtml="";

            for(var i=;i<sltTarget.options.length;i++)

            {

                myhtml +="Select Item" + i + ":  text= " + sltTarget.options[i].text + ", value=" + sltTarget.options[i].value + "<br/>";

            }

            document.getElementById("showInfo").innerHTML=myhtml;

        }

    </script>

</head>

<body>

    <select ondblclick="removeItem();" id="sltSrc" multiple="true" style="height:150px;width:150px">

        <option value="a">srcA</option>

        <option value="b">srcB</option>

        <option value="c">srcC</option>

    </select>

    <select ondblclick="addItem();" id="sltTarget"  multiple="true" style="height:150px;width:150px">

        <option value="a">targetA</option>

        <option value="b">targetB</option>

        <option value="c">targetC</option>

    </select>

    <div id="showInfo"></div>

    <input type="button" value="showSelectOptions"  onclick="showSelectOptions();"/>

</body>

</html>

多选列表Select之双击删除与添加Demo的更多相关文章

  1. android高仿微信拍照、多选、预览、删除(去除相片)相冊功能

    先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...

  2. multiselect2side：jQuery多选列表框插件

    http://blog.csdn.net/rosanu_blog/article/details/8550723 http://www.bkjia.com/jQuery/449193.html < ...

  3. AngularJS实现数据列表的增加、删除和上移下移等功能实例

      转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJ ...

  4. Vue.js 多选列表（Multi-Select）组件

    搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...

  5. 使用mx:Repeater在删除和添加item时列表闪烁

    使用mx:Repeater在删除和添加item时列表闪烁 不可能在用户界面上闪闪的吧,recycleChildren属性可帮助我们 recycleChildren属性==缓存,设为true就可以了 本 ...

  6. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  7. MVC应用程序与多选列表(checkbox list)

    原文:MVC应用程序与多选列表(checkbox list) 程序中,经常会使用checkbox lsit来呈现数.能让用户有多选项目.此博文Insus.NET练习的checkbox list相关各个 ...

  8. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  9. iPhone实现自定义多选列表

    好久没更新博客了,今天写了一个自定义的多选列表,可以跟爱学习的各位进行分享,首先我们先来看一下效果图: 一般大家都是用UITableView自己的编辑模式来实现CheckBox的,这里我们用自定义Ce ...

随机推荐

  1. 【c++】标准模板库STL入门简介与常见用法

    一.STL简介 1.什么是STL STL(Standard Template Library)标准模板库,主要由容器.迭代器.算法.函数对象.内存分配器和适配器六大部分组成.STL已是标准C++的一部 ...

  2. 【Linux下进程机制】从一道面试题谈linux下fork的运行机制

    今天一位朋友去一个不错的外企面试linux开发职位,面试官出了一个如下的题目: 给出如下C程序,在linux下使用gcc编译: #include "stdio.h" #includ ...

  3. BZOJ3329 : Xorequ

    第一问: 打表可得规律:当且仅当x&(x<<1)=0时才会是解,于是数位DP f[i][j][k]表示二进制中前i位,上一位是j,前i位是否等于n的方案数 第二问: 打表可得规律: ...

  4. （centos）linux下访问双系统windows7文件系统

    fdisk -l 无法挂载 NTFS格式的分区:mount: unknown filesystem type ‘ntfs’.   问题:       # mount –t ntfs /dev/sdb1 ...

  5. POJ 1155 (树形DP+背包+优化)

    题目链接: http://poj.org/problem?id=1155 题目大意:电视台转播节目.对于每个根,其子结点可能是用户,也可能是中转站.但是用户肯定是叶子结点.传到中转站或是用户都要花钱, ...

  6. TYVJ P1063 数字串 Label:双指针 线性扫描

    描述 给你一个长度为n的数字串,数字串里会包含1-m这些数字.如果连续的一段数字子串包含了1-m这些数字,则称这个数字字串为NUM串.你的任务是求出长度最短的NUM串是什么,只需要输出这个长度即可.1 ...

  7. 【POJ】2318 TOYS（计算几何基础+暴力）

    http://poj.org/problem?id=2318 第一次完全是$O(n^2)$的暴力为什么被卡了-QAQ(一定是常数太大了...) 后来排序了下点然后单调搞了搞..(然而还是可以随便造出让 ...

  8. COJ0702 数学（三）

    数学(三) 难度级别:D: 运行时间限制:1800ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 给出两个正整数a,b,求a*b. 输入 输入共两行,每行是一个正整 ...

  9. GC 基础

    = GC 基础 ===================== JAVA堆的描述如下: 内存由 Perm 和 Heap 组成. 其中 Heap = {Old + NEW = { Eden , from, ...

  10. java ---运算符

    运算符简单来划分可以分为五大类:分别是算术运算符.关系运算符.逻辑运算符.三元运算符和赋值运算符.下面来分别介绍一下这几类运算符: 一.算术运算符 包含+  -  *  /  %  ++  --,这几 ...