双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理。写了个简单的例子,来说明一下.
代码如下:
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
46
|
<! DOCTYPE html>
< html >
< head >
< title >jquery之双下拉框</ title >
< style type = "text/css" >
.select1{ width:200px; min-height:150px;} .select2{ width:200px; min-height:150px; margin-left:20px;} .btn{ margin-top:20px; } </ style >
</ head >
< body >
< select class = "select1" multiple = "multiple" >
< option >1</ option >
< option >2</ option >
< option >3</ option >
< option >4</ option >
< option >5</ option >
< option >6</ option >
< option >7</ option >
</ select >
< select class = "select2" multiple = "multiple" >
< option >8</ option >
< option >9</ option >
< option >10</ option >
< option >11</ option >
< option >12</ option >
< option >13</ option >
< option >14</ option >
</ select >
< div class = "btn" >
< button class = "btn_add" >右移>></ button >
< button class = "btn_delete" ><<左移</ button >
</ div >
< script src = "js/jquery-1.11.1.min.js" ></ script >
< script >
$(function(){ $(".btn_add").click(function(){
$(".select1 option:selected").appendTo(".select2");
});
$(".btn_delete").click(function(){
$(".select2 option:selected").appendTo(".select1");
});
}) </ script >
</ body >
</ html >
|
其实要实现这个功能,只需要用到appendTo()这个方法。它的用处就是在被选元素的结尾添加内容。
一般,下拉框都是单选,但是加上“multiple”这个属性,就可以同时多选。
我们还可以结合ajax循环遍历数据,来进行动态的添加删除。
本文永久地址:http://blogs.zmit.cn/5155.html
本文出自 中梦科技博客 ,转载时请注明出处及相应链接。