多选列表Select之双击删除与添加Demo
双击任一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的更多相关文章
- android高仿微信拍照、多选、预览、删除(去除相片)相冊功能
先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...
- multiselect2side:jQuery多选列表框插件
http://blog.csdn.net/rosanu_blog/article/details/8550723 http://www.bkjia.com/jQuery/449193.html < ...
- AngularJS实现数据列表的增加、删除和上移下移等功能实例
转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJ ...
- Vue.js 多选列表(Multi-Select)组件
搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...
- 使用mx:Repeater在删除和添加item时列表闪烁
使用mx:Repeater在删除和添加item时列表闪烁 不可能在用户界面上闪闪的吧,recycleChildren属性可帮助我们 recycleChildren属性==缓存,设为true就可以了 本 ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- MVC应用程序与多选列表(checkbox list)
原文:MVC应用程序与多选列表(checkbox list) 程序中,经常会使用checkbox lsit来呈现数.能让用户有多选项目.此博文Insus.NET练习的checkbox list相关各个 ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- iPhone实现自定义多选列表
好久没更新博客了,今天写了一个自定义的多选列表,可以跟爱学习的各位进行分享,首先我们先来看一下效果图: 一般大家都是用UITableView自己的编辑模式来实现CheckBox的,这里我们用自定义Ce ...
随机推荐
- 【wikioi】1282 约瑟夫问题
题目链接:http://www.wikioi.com/problem/1282/ 算法:线段树(名次树) 说明在代码里有了,直接上代码. #include <cstdio> using n ...
- 用MyEclipse搭建SSH框架(Struts2 Spring Hibernate)
1.new一个web project. 2.右键项目,为项目添加Struts支持. 点击Finish.src目录下多了struts.xml配置文件. 3.使用MyEclipse DataBase Ex ...
- 决策树ID3算法示例
决策树代码如下: #include "MyID3.h" using namespace std; void ReadData() //读入数据 { ifstream fin(&qu ...
- SQL Server 错误:15023(创建对于用户失败)
问题: 错误15023:当前数据库中已存在用户或角色 在把远程服务器上的数据库备份还原到本地机后, 给一个"登录"关联一个"用户"时(用户映射),发生错误:“错 ...
- 使用Powershell取出属于某些指定组的用户并导出为csv
知识这东西就像雪球,越滚越大,今天看到了这篇自己1年多前写的博文,简直弱爆了.于是更新一下程序: 2016-6-15更新,短短几行代码,就拿到了组和组成员,其中还用到了递归,以处理组成员是组的情况: ...
- OpenCV学习笔记——点击显示鼠标坐标
点击显示鼠标显示坐标,再次点击时上一次的坐标的会消失…… #include<highgui.h> #include<cv.h> void on_mouse(int event, ...
- 如何解包,编辑,重新打包boot images
HOWTO: Unpack, Edit, and Repack Boot Images http://forum.xda-developers.com/showthread.php?t=443994 ...
- memory_limit session.cache_expire ecshop初始化注释说明
memory_limit session.cache_expire ecshop初始化注释说明 memory_limit = 128M; 一个脚本所能够申请到的最大内存字节数(可以使用K和M作为单位) ...
- Unity4.5版本DLL库名字问题
背景 在unity4.2版本中可以在Android中使用的so链接库,在Unity4.5中使不了-- [DllImport("libclient.so", EntryPoint ...
- Ext.net
.FileTypeName=="附件") { command.text="上传"; ...