双下拉框要实现的效果，实际上就是左边下拉选择框里的内容，可以添加到右边，而右边同理。写了个简单的例子，来说明一下.
代码如下：
|
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
|
<!DOCTYPEhtml>
<html>
<head>
<title>jquery之双下拉框</title>
<styletype="text/css">
.select1{ width:200px; min-height:150px;}.select2{ width:200px; min-height:150px; margin-left:20px;}.btn{ margin-top:20px; }</style>
</head>
<body>
<selectclass="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>
<selectclass="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>
<divclass="btn">
<buttonclass="btn_add">右移>></button>
<buttonclass="btn_delete"><<左移</button>
</div>
<scriptsrc="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
本文出自 中梦科技博客 ，转载时请注明出处及相应链接。