正文

jQuery：实现两个<select>控件的互移操作

IP云
IP云V管理员/3 阅读
08/09
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<div>
<select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> <span style="top: 30px; position: fixed;">
<input type="button" value="<<" id="btnLeft" />
<input type="button" value=">>" id="btnRight" />
</span> <select id="rightSelector" multiple="multiple" name="SmsListOnRight" style="height:100px; width:50px; margin-left:80px">
<option value="6">A</option>
<option value="7">B</option>
<option value="8">C</option>
<option value="9">D</option>
<option value="10">E</option>
</select> </div> <br> <input type="button" onclick="selectAll()" id="btnSelectAll" value="selectAll" /> <script src="js/jquery-2.1.4.js"></script>
<script>
$("#btnRight").click(function () {
//数据option选中的数据集合赋值给变量vSelect
var vSelect = $("#leftSelector option:selected");
//克隆数据添加到 rightSelector 中
vSelect.clone().appendTo("#rightSelector");
//同时移除 leftSelector 中的 option
vSelect.remove();
}); //right move
$("#btnLeft").click(function () {
var vSelect = $("#rightSelector option:selected");
vSelect.clone().appendTo("#leftSelector");
vSelect.remove();
}); function selectAll() {
var lst1 = window.document.getElementById("rightSelector");
var length = lst1.options.length;
for (var i = 0; i < length; i++) {
var v = lst1.options[i].value; //option内的value
var t = lst1.options[i].text; //显示的文本
alert(v + ":" + t);
}
}
</script> </body>
</html>

二、效果图

jQuery：实现两个<select>控件的互移操作的更多相关文章

  1. Jquery&plus;json绑定带层次下拉框（select控件）

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  2. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  3. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http&colon;&sol;&sol;www&period;cnblogs&period;com&sol;lxblog&sol;archive&sol;2013&sol;01&sol;09&sol;2853056&period;html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  4. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  5. jquery仿jquery mobile的select控件效果

    不说废话.直接上代码 //仿jQuery mobile Select控件 //使用方法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function Sele ...

  6. jquery去重复 如何去除select控件重复的option

    #1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...

  7. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  8. JavaScript封装一个实用的select控件

    最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样 ...

  9. js&plus;CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 在Visual Studio 2012 Blue theme下使用Dark theme的文本编辑器颜色设置

    Visual Studio 2012 默认提供了3种color theme: blue,light,和dark.其中dark的文本编辑器颜色设定很爽,可是整个菜单项加上一些小的窗口如Find Resu ...

  2. OpenAl编程入门：播放一段音频

    OpenAl编程入门 关于OpenAl我就不多介绍了,这两篇说明对于初步了解已经足够了:http://baike.baidu.com/view/1355367.htmhttp://en.wikiped ...

  3. RAID阵列的初始化与管理

    如果我们创建RAID阵列的目的是新部署一台服务器,我们建议所有新创建的RAID阵列都应该做初始化操作,这样,硬盘上原有的用户数据将被清除,以便进行后续的系统,软件安装. 转自: http://zh.c ...

  4. NSUserDefaults 可以保存哪些类型

    NSData NSString NSNumber NSDate NSArray NSDictionary *如果你想保存其他类型,如UIImage,你应该进行编码(即archive),或者将它转换为N ...

  5. 【随手记-有空整理】Linux随手记

    1. CentOS6.5安装g++:yum install gcc-c++ 注意如果写成yum install g++会提示No package g++ available. 2. XShell下打开 ...

  6. Determining IP information for eth1&period;&period;&period; failed&semi; no link present&period; Check cable？ 解决办法

    有时候会遇到这种问题 解决办法为 进入网卡配置,将 BOOTPROTO 改为 none 然后 ifconfig –a 查看可以得到 eth1 已经可以寻到 iP 地址,如下: Service netw ...

  7. 解析xml字符串时报&OpenCurlyDoubleQuote;前言中不允许有内容”错误。

    一,问题出现经过: j基于java语言webservic服务端接收客户端 传来的xml字符串用 解析时总报:org.dom4j.DocumentException: Error on line 1 o ...

  8. 回顾4180天在腾讯使用C&num;的历程，开启新的征途

    今天是2018年8月8日,已经和腾讯解除劳动关系,我的公司正式开始运营,虽然还有很多事情需要理清,公司官网也没有做,接下来什么事情都需要自己去完成了,需要一步一个脚印去完善,开启一个新的征途,我将在博 ...

  9. Ubuntu 下生成 python 环境安装文件 requirements&period;txt

    参考: 查找python项目依赖并生成requirements.txt Ubuntu 下生成 python 环境安装文件 requirements.txt 首先通过 pip 安装pyreqs模块: p ...

  10. nginx启用TCP反向代理日志配置

    Nginx使用TCP反向代理日志配置不同于http 修改nginx配置文档/usr/local/nginx/conf/nginx.conf 设置日志格式 stream { log_format pro ...