双击任一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. BZOJ3733 : [Pa2013]Iloczyn

    首先将$n$的约数从小到大排序,设$dfs(x,y,z)$表示当前可以选第$x$个到第$m$个约数,还要选$y$个,之前选的乘积为$z$是否可能. 爆搜的时候,如果从$x$开始最小的$y$个相乘也超过 ...

  2. 转载 从最简单的vector中sort用法到自定义比较函数comp后对结构体排序的sort算法

    转载自:http://www.cnblogs.com/cj695/p/3863142.html sort函数在使用中非常好用,也非常简单,而且效率与冒泡或者选择排序不是一个数量级.本文就sort函数在 ...

  3. [Unity2D]预制件Prefab

    预制件Prefab是一个组件模板,比如在游戏里面要实现开枪的时候会有子弹不停地从枪口飞出来,那么就可以通过Prefab来实现子弹的游戏对象,表示所有的子弹都是从同一个Prefab来构建出来的,也可以理 ...

  4. td也可以溢出隐藏显示

    或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了. table真的过时了么?你真的了解 ...

  5. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

  6. QCheckBox 的按钮响应

    Qt中QCheckBox的按键响应如下,其中checkbox为对象名: void YourClass::on_checkbox_toggled(bool state) { // Do somethin ...

  7. python 操作mysql

    安装模块: #pip install .... MySQLdb(2.x) pymysql(3.x) import MySQLdb as sql con = sql.connect( host = &q ...

  8. ueditor1.4.3 php版本使用修改图片上传路径

    实例化编辑器必须带上一下东西 header部分 <script type="text/javascript" charset="utf-8" src=&q ...

  9. 【转】jsonp详解

    原文地址:http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html json相信大家都用的多,jsonp我就一直没有机会用 ...

  10. Cent OS 6.6 下安装mysql（5.5.20）和 PHP（5.3.10）

    0.准备步骤(没有连接网络的 linux): 挂载光盘.让网络 yum 源失效.修改光盘 yum 文件.安装 c 语言编译器 gcc. 1.MySQL(5.5.20) 下载 mysql 5.5.20 ...