jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）
效果图：
使用jQuery插件---multiselect2side做法：
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <link rel="stylesheet" href="jquery.multiselect2side.css" type="text/css" />
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.multiselect2side.js"></script> <script type="text/javascript">
$().ready(function() {
$('#searchable').multiselect2side({
search: "待选区 搜索：" ,
selectedPosition: 'right',
moveOptions: false,
labelsx: '待选区',
labeldx: '已选区'
});
});
</script>
</head> <body>
<table>
<tr>
<td>
<select name="searchable[]" id='searchable' multiple='multiple' >
<option value="超级管理员1">超级管理员</option>
<option value="普通管理员2">普通管理员</option>
<option value="信息发布员3">信息发布员</option>
<option value="财务管理员4">财务管理员</option>
<option value="产品管理员5">产品管理员</option>
<option value="资源管理员6">资源管理员</option>
<option value="管理员7">管理员</option>
</select>
</td>
</tr>
<tr>
<td><p id="stat"></p></td>
</tr>
</table> </body>
</html>
解析：
head头部导入
jquery.multiselect2side.css文件
jquery-1.6.4.min.js jquery文件
jquery.multiselect2side.js文件
**注意：jquery文件必须在jquery.multiselect2side.js之前导入
写一个js调用multiselect2side方法，参数说明
search: "待选区 搜索："参数是添加搜索区
selectedPosition: 'right', 参数是添加右侧的下拉框选择项位置（必须）
moveOptions：移动选项，可以用来给选项排序，实际应用意义不大，这里设置为false
labelsx和labeldx是用来设置左右两个列表框的标题，如果不需要可设置为空
maxSelected：最大选项数，即最多只能选择几项
项目 1 <link type="text/css" href="/Public/Css/jquery.multiselect2side.css" rel="stylesheet" />
<script type="text/javascript" src="/Public/Js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/Public/Js/jquery.multiselect2side.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#searchable').multiselect2side({
search: "待选区 搜索：" ,
selectedPosition: 'right',
moveOptions: false,
labelsx: '待选区',
labeldx: '已选区'
}); });
</script> <form action="/admin/System/add?ac=insert" id="frm" method="post" enctype="multipart/form-data">
<select name="searchable[]" id='searchable' multiple='multiple' >
<if condition="!empty($mod_user)">
<option value="0">全部</option>
<volist name="mod_user" id="vo">
<option value="{$vo.userid}">{$vo.nickname}</option>
</volist>
<else />
未找到用户
</if>
</select>
</form> 页面获取值使用 $ser=$_POST['searchable']; 获取的是数组类型option的value值
方法二：使用jquery实现
<!--方法二，使用jQuery实现-->
<style type="text/css">
#one{width:200px; height:180px; float:left}
#two{width:50px; height:180px; float:left}
#three{width:200px; height:180px; float:left}
.btn{width:50px; height:30px; margin-top:10px; cursor:pointer;}
</style>
<script type="text/javascript">
//下拉框交换JQuery 导入jQuery文件
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script> select下拉框内容交换开始-->
<!-- <table width="500" align="center" border="0" cellpadding="0" cellspacing="0" class="newContTab">
<tr>
<td><div>
<div>
<select multiple="multiple" id="select1" style="width:150px;height:200px; float:left; border:4px #A0A0A4 outset; padding:4px; "> <if condition="!empty($mod_user)">
<option value="0">全部</option>
<volist name="mod_user" id="vo">
<option value="{$vo.userid}">{$vo.nickname}</option>
</volist>
<else />
未找到用户
</if> </select>
</div>
<div style="float:left;padding-left: 5px;"> <span id="add">
<input type="button" class="btn" value=">"/>
</span><br />
<span id="add_all">
<input type="button" class="btn" value=">>"/>
</span> <br />
<span id="remove">
<input type="button" class="btn" value="<"/>
</span><br />
<span id="remove_all">
<input type="button" class="btn" value="<<"/>
</span> </div>
<div>
<select multiple="multiple" id="select2" style="width: 150px;height:200px; float:lfet;border:4px #A0A0A4 outset; padding:4px;">
</select>
</div>
</div></td>
</tr>
</table>
<!--select下拉框内容交换结束-->
<input type="hidden" id="uidlist" name="uidlist" value="" /> <script type="text/javascript">
$(function(){
$('#sub').click(function(){
var uidlist=$('#searchable').val();
var midlist=$('#select4').val();
var content=$('#content').val();
var pushtime=$('#pushtime').val();
var image=$('#image').val();
$('#uidlist').val(uidlist); });
});
</script>
jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）的更多相关文章
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jQuery操作选中select下拉框的值
js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 ...
- js如何获取select下拉框的value以及文本内容
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...
- 获取select下拉框的value以及文本内容
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...
- jquery实现模拟select下拉框效果
<IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...
- jQuery动态生成<select>下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
- element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑
这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题. 这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题, ...
随机推荐
- java-map-EnumMap
在平常的项目中,enumMap是比较少用到的一种map,一般都不会使用到这种容器,那么我将从如下几个方面来阐述我对enumMap的理解 1.使用场景 在key是比较固定的情况下,使用enumMap是最 ...
- 有关mysql数据库的编码
今天在通过表单给php提交数据,然后插入到数据库中.网页与php的编码格式均为utf-8,在插入到数据库中时也设置了$this->query("set names utf8;" ...
- Qweb报表中的Reload from Attachment参数
通过继承的方式修改了Qweb报表却发现没有生效,经查,其原因在于报表的设置中勾选了 Reload from Attachment 选项. 将本选项取消选中即可生效.
- BestCoder Round #36 [B] Gunner
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=5199 先对树的高度排序,然后对每次射击高度二分查找即可,打过之后数目变为0. #include< ...
- hdu 2992 Hotel booking
http://acm.hdu.edu.cn/showproblem.php?pid=2992 #include <cstdio> #include <cstring> #inc ...
- css属性之transform
定义和用法 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 实例 旋转 div 元素: <!DOCTYPE html> < ...
- java的CalssLoader
类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态加载到 Java 虚拟机中并执行.类加载器从 JDK 1.0 就出现了,最初是为了满足 Ja ...
- 精美实用的jQuery插件精选
jQuery的确是一款相当强大的Javascript框架,同时jQuery的插件就多入牛毛,如果你善于收集,那么你在写前端页面的时候肯定会更加方便.本文精选了一些精美实用的jQuery插件供大家参考. ...
- Android ImageView的scaletype属性
ImageView的属性android:scaleType,即 ImageView.setScaleType(ImageView.ScaleType).android:scaleType是控制图片如何 ...
- puppet aix package 之rsync安装
AIX中使用RPM安装RSync遇到的问题及解决办法 最近在折腾AIX的系统,它里面本来有一个包管理工具叫installp,但是俺不会用,也不知道从那里找包. 幸亏AIX提供了RPM的支持,所以安装软 ...