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

2024-10-23 08:24:01

一、直接上代码

<!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 multiple左右添加和删除功能的简单实例

项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的. 具体代码如下: <center> <table> <tr align="center"> <td colspan="3"> 选择 </td> &
jquery 实现两Select 标签项互调示例代码

<html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" c
两个select之间option的互相添加操作(jquery实现)

自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现. 插件源代码(listtolist.js): 复制代码代码如下: /** fromid:源list的id. toid:目标list的id. moveOrAppend参数("move"或者是"append"): move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加. append -- 源list中选
jquery 操作两个select实现值之间的互相传递

复制代码代码如下: function moveToRight(select1,select2)//把选中的移动到右边 sleect1和sleect2分别是下拉列表框的ID{ $('#'+select1+' option:selected').each(function(){ $("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").append
jquery select多选框的左右移动具体实现代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=&quo
基于jquery实现select选择框内容左右移动添加删除代码分享

本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图: ----------------------查看效果----------------------- 小提示:浏览
jQuery实现Select左右复制移动内容

引入的文件为<script type="text/javascript" src="jquery-1.10.2.js"></script> 双击也可以移动 [1].[代码] <script type="text/javascript"> $(function(){ //移到右边 $("#add").click(function(){ //获取选中的选项,删除并追加给对方 $("#s
jQuery操作Select的Option上下移动及移除添加等等

复制代码代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**
jquery实现select选择框内容左右移动代码分享

本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,运行效果图: 具体代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> </head> <body> <
jQuery实现两个select控件的互移操作

一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> </head> <body> <div> <select id="leftSelector" multiple="multiple" name="SmsLis
轻松使用jQuery双向select控件Bootstrap Dual Listbox

本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一.使用 1.引用css和js文件 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> <
jquery通过扩展select控件实现支持enter或focus选择的方法

本文实例讲述了jquery通过扩展select控件实现支持enter或focus选择的方法.分享给大家供大家参考,具体如下: /*************************************** * @ author jdkleo * @ date 2013/2/27 JQuery SelKeys USAGE: jQuery.selkeys.enter(jQuery("#selcon")); jQuery.selkeys.focus(jQuery("#selcon
js+CSS实现模拟华丽的select控件下拉菜单效果

本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:
模仿combox(select)控件，不用为美化select烦恼了。

不用整天为美化select控件烦恼了. 1.可批量美化select控件. 2.可以有onchange句柄. 3.触发onchange的函数可带参数. 3.可以得到select的值. 4.可设置像select类似的滚动条(如大于或等于8个数目时出现滚动条) 5.可设置宽度和高度 API参考: //首先生成一个simulateSelect的实例 //构造函数的第一个可选参数为触发onchange的函数,其它的为onchange函数的参数: c = new simulateSelect(s1oncha
HTML的select控件美化

CSS: .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-select-text > div { p
浅析Bootstrip的select控件绑定数据的问题

此问题让我倒弄了一下午时间,最后终于被我拿下.下面小编把我的功劳分享出来,以此来做个备份,同时也希望能帮助到大家. 具体详情如下所示: $(function(){ var stu_no = freeUrl(); var data, subname="",data2; var sbList = new Array(); $.ajax({ async: false , dataType: "json", contentType: "application/js
jQuery带时间的日期控件代码分享

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: 带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery带时间的日期控件代码如下 <h
jQuery EasyUI中的日期控件DateBox修改方法

jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/cs
C#实现两个richtextbox控件滚动条同步滚动的简单方法

前言有时候我们需要实现对照文章等,往往将文本放到两个richtextbox控件中,但是,如果我们需要同步滚动查看,来达到更好的观看效果. 当然,传统的方法重载控件或者自定义控件都可以达到目的,但是对于新手或者想仅仅只用一次这个控件的人来说,是非常麻烦的.所以,接下来我来提供一种简单快捷的方法来实现:richtextbox滚动条同步的功能. 方法如下: 首先,我们在winform窗体创建两个richtextbox控件下面介绍两个方法,我经常用到第一个方法,获得当前鼠标所在richtextbo

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

相关推荐

随机推荐