select下拉框左右变换
效果图：
使用jQuery插件---multiselect2side做法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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" />
2 <script type="text/javascript" src="/Public/Js/jquery-1.6.4.min.js"></script>
3 <script type="text/javascript" src="/Public/Js/jquery.multiselect2side.js"></script>
4 <script type="text/javascript">
5 $().ready(function() {
6 $('#searchable').multiselect2side({
7 search: "待选区 搜索：" ,
8 selectedPosition: 'right',
9 moveOptions: false,
10 labelsx: '待选区',
11 labeldx: '已选区'
12 });
13
14 });
15 </script>
16
<form action="/admin/System/add?ac=insert" id="frm" method="post" enctype="multipart/form-data">
17 <select name="searchable[]" id='searchable' multiple='multiple' >
18 <if condition="!empty($mod_user)">
19 <option value="0">全部</option>
20 <volist name="mod_user" id="vo">
21 <option value="{$vo.userid}">{$vo.nickname}</option>
22 </volist>
23 <else />
24 未找到用户
25 </if>
26 </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>
select下拉框左右变换的更多相关文章
- s:select下拉框validation验证
S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- js如何获取select下拉框的value以及文本内容
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...
- css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- 好看的Select下拉框是如何制造的
现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...
随机推荐
- python3编码
一.字符编码 1.什么实字符编码:将人识别的字符转换成计算机能识别的01,而转换的过程或者规则就是字符编码表. 而这种字符编码表表示了一种对应关系. 2.常用的字符编码表有:ascii.unicode ...
- 有关于并发中的死锁(Deadlock)、饥饿(Starvation)、活锁(Livelock)
最近在看<实战Java高并发程序设计>,发现了之前没有接触过的几个名词. 死锁:之前在接触多线程的时候,接触过死锁的情况.死锁是线程中最糟糕的情况,如下面的图中的四辆车子一样,如果没有一辆 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- Object备忘录
1.Object.assign(target,...source) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 2.Object.create()方法创建一个新对 ...
- servlet的继承关系
一.servlet的继承关系 1.servlet程序是sun公司开发用于web资源技术,任何一个类只需要实现了servlet接口,那么就可以成为servlet程序 2.继承体系: ---------- ...
- JDBC四种驱动程序
四种JDBC驱动程序 JDBC-ODBC桥驱动程序(JDBC-ODBC Bridge Driver) 此类驱动程序由JDBC-ODBC桥和一个ODBC驱动程序组成.其工作原理是,通过一段本地C代码将J ...
- codecombat之地牢关卡Python代码
1.地牢 # 向宝石进发. # 小心撞墙! # 在下面输入你的代码. self.moveRight() self.moveDown() self.moveRight() 2.深藏的宝石 # 利用你的移 ...
- POJ-1860.CurrencyExchange(Spfa判断负环模版题)
本题思路:每完成一次交换之后交换余额多于原钱数则存在正环,输出YES即可. 参考代码: #include <cstdio> #include <cstring> #includ ...
- Java中关于quartz定时任务时间设置
每天凌晨2点 0 0 2 * * ?和每天隔一小时 0 * */1 * * ? 例1:每隔5秒执行一次:*/5 * * * * ? 例2:每隔5分执行一次:0 */5 * * * ?在26分.29分. ...
- 4-18 class与id的区别
1. class是设置标签的类, class属性用于指定元素属于何种样式的类. 如样式表可以加入.content1 { color: red; background: #ff80c0 } 使用方法:c ...