jQuery 将 MultiSelect 值移动到另一个 MultiSelect答案

【问题标题】：jQuery moving MultiSelect values to another MultiSelectjQuery 将 MultiSelect 值移动到另一个 MultiSelect
【发布时间】：2010-11-06 17:00:45
【问题描述】：

所以我有一个带有 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 有没有类似的东西，或者这是一个自定义的 sn-p 代码？

【问题讨论】：

标签： jquery select

【解决方案1】：

有一个名为 crossSelect 的 jquery 插件似乎可以满足您的需求。

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

【讨论】：

上述链接已失效。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

这应该是公认的答案——无需插件即可完美运行。
什么是回报和！为了？
@alonso.torres 用于返回 false，来自 blog.jeremymartin.name/2008/02/…：为了防止页面在用户单击按钮时滚动到顶部（在某些浏览器中），我添加了 return错误的;到点击事件处理程序。

【解决方案4】：

试试下面的（取自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>

【讨论】：

非常简单的解决方案。这正是我一直在寻找的。谢谢，塞拉斯！

【解决方案5】：

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

<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');
 });

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

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

【讨论】：

【解决方案6】：

这是我的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 文件。

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

可过滤
响应式
可本地化
高度可定制
似乎维护得很好

【讨论】：

【解决方案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>

【讨论】：