双下拉框要实现的效果，实际上就是左边下拉选择框里的内容，可以添加到右边，而右边同理。写了个简单的例子，来说明一下.
代码如下：
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本文出自 中梦科技博客 ，转载时请注明出处及相应链接。
转载于:https://www.cnblogs.com/yanduanduan/p/7157828.html
相关资源：JAVA上百实例源码以及开源项目