Question

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

<select class="boxa" multiple="multiple">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select class="boxb" multiple="multiple">

</select>

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

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

Answer 1

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

Answer 2

尝试以下方法（取自http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html）

<html>  
<head>  
 <script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript">  
  $().ready(function() {  
   $('#add').click(function() {  
    return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
    return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
  });  
 </script>  

 <style type="text/css">  
  a {  
   display: block;  
   border: 1px solid #aaa;  
   text-decoration: none;  
   background-color: #fafafa;  
   color: #123456;  
   margin: 2px;  
   clear:both;  
  }  
  div {  
   float:left;  
   text-align: center;  
   margin: 10px;  
  }  
  select {  
   width: 100px;  
   height: 80px;  
  }  
 </style>  

</head>  

<body>  
 <div>  
  <select multiple id="select1">  
   <option value="1">Option 1</option>  
   <option value="2">Option 2</option>  
   <option value="3">Option 3</option>  
   <option value="4">Option 4</option>  
  </select>  
  <a href="#" id="add">add &gt;&gt;</a>  
 </div>  
 <div>  
  <select multiple id="select2"></select>  
  <a href="#" id="remove">&lt;&lt; remove</a>  
 </div>  
</body>  
</html>

Answer 3

我有同样的问题，但我找到了解决方法

<div>
    <select multiple id="select1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</div>
<div>
    <select multiple id="select2"></select>
</div>

jquery的

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

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

如果想要一个按钮添加添加＆gt;＆gt; 和jquery点击选择器

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

Answer 4

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

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

Answer 5

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

Answer 6

如果你对插件很好，这个插件确实运行良好。

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

Answer 7

这是我的HTML代码

<div>
        <select multiple id="select1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </select>
        <a href="#" id="add">add &gt; &gt;</a>
    </div>
    <div>
        <select multiple id="select2"></select>
        <a href="#" id="remove">remove &lt; &lt;</a>
    </div>

和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非常方便。

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

Answer 9

如果您想要一次性选择和表单提交快速解决方案，以在单击时添加和删除两个选择之间的选项。

$(document).on('click', '.onclickaddto', function(e){
    var to  = $(this).attr('data-to');
    $(this).find('option:selected').remove().appendTo($(to)); 
});

.multiselect{
    width: 98%;
    height: 100px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="display:flex;">
   <div style="width:50%;">
        <h2>Enabled countries</h2>
          <select name="allowed_countries[]" class="onclickaddto multiselect" data-to="#available_countries" id="allowed_countries" multiple=""></select>
    </div>
    
    <div style="width:50%">
        <h2>Available countries</h2>
            <select class="onclickaddto multiselect" id="available_countries" data-to="#allowed_countries" multiple="">
                <option value="AF">Afghanistan</option>
                <option value="AL">Albania</option>
                <option value="DZ">Algeria</option>
                <option value="AD">Andorra</option>
        </select>
     </div>
     
</div>

jQuery将MultiSelect值移动到另一个MultiSelect

9 个答案: