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

<! 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