jQuery将MultiSelect值移动到另一个MultiSelect

所以我有一个带有x值的MultiSelect框，我需要能够移动到另一个MultiSelect框，反之亦然。

 Volvo Saab Mercedes Audi    

需要在按钮单击时将boxa的全部或一个值移动到boxb，同时还能够将值从boxb移回boxa。

jQuery是否有这样的东西，或者这是一个自定义的代码片段？

Answer 1

有一个叫做crossSelect的jquery插件似乎可以做你想要的。

jQuery没有内置的，你需要找到你喜欢的插件并使用它，或者编写自己的插件。 （当然，您不必使用jQuery来编写或使用它，如果您愿意，可以在纯JavaScript中实现它）

Answer 2

 $().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); }); 

Answer 3

请尝试以下内容（摘自http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html ）

        
  Option 1 Option 2 Option 3 Option 4  add >> 
 
  << remove 
   

Answer 4

我有同样的问题，但我发现了一个方法

 
  Option 1 Option 2 Option 3 Option 4  
 
   

jQuery的

 $('#select1').click(function () { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#select2').click(function () { return !$('#select2 option:selected').remove().appendTo('#select1'); }); 

如果想要一个按钮，在这里添加一个添加>>和jquery点击选择器

示例http://jsfiddle.net/diffintact/GJJQw/3/

Answer 5

 $('#boxa option').appendTo('#boxb'); 

Answer 6

如果你对插件很好，这个插件确实很好用。

http://crlcu.github.io/multiselect/#home

Answer 7

这是我的HTML代码

 
  Option 1 Option 2 Option 3 Option 4 Option 5 Option 6  add > > 
 
  remove < <  

和Javascript代码

 $("#add").click(function(){ $("#select1 option:selected").remove().appendTo($("#select2")); }) $("#remove").click(function(){ $("#select2 option:selected").remove().appendTo($("#select1")); }) 

确保导入了jquery.js文件。

Answer 8

如果使用Bootstrap，我发现bootstrap-duallistbox非常方便。

• 可筛选
• 响应
• 本地化
• 高度可定制
• 似乎维护得很好