jQuery之双下拉框
Posted 心若不动，风又奈何；你若不伤，岁月无恙。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery之双下拉框相关的知识，希望对你有一定的参考价值。
双下拉框要实现的效果，实际上就是左边下拉选择框里的内容，可以添加到右边，而右边同理。写了个简单的例子，来说明一下.
代码如下：
|
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
|
<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
本文出自 中梦科技博客 ，转载时请注明出处及相应链接。
以上是关于jQuery之双下拉框的主要内容，如果未能解决你的问题，请参考以下文章