select下拉框左右變換
效果圖：javascript
使用jQuery插件---multiselect2side作法：css
|
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
>
|
解析：html
head頭部導入
jquery.multiselect2side.css文件
jquery-1.6.4.min.js jquery文件
jquery.multiselect2side.js文件
**注意：jquery文件必須在jquery.multiselect2side.js以前導入java
寫一個js調用multiselect2side方法，參數說明
search: "待選區 搜索："參數是添加搜索區
selectedPosition: 'right', 參數是添加右側的下拉框選擇項位置（必須）
moveOptions：移動選項，能夠用來給選項排序，實際應用意義不大，這裏設置爲false
labelsx和labeldx是用來設置左右兩個列表框的標題，若是不須要可設置爲空
maxSelected：最大選項數，即最多隻能選擇幾項jquery
項目 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實現app
<!--方法二，使用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>
相關文章
- 1. select下拉框
- 2. Angular4---select下拉框
- 3. jquery左右選中(用select建框)
- 4. 漸變上下左右
- 5. layui下拉框獲取下拉值（select）
- 6. 多選下拉框（select 下拉多選）
- 7. select 左右多選 demo html
- 8. select 下拉框多選
- 9. Jquery 操做select下拉框
- 10. JQuery操做select下拉框
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • ionic select - ionic 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章