logo标签列表

jQuery移动MultiSelect值到另一个MultiSelect

jqueryselect
21

我有一个多选框，其中有x个值，我需要能够将它们移动到另一个多选框中，反之亦然。

<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中是否有类似的功能，还是需要自定义代码段？

9个回答
73
$().ready(function() {  
 $('#add').click(function() {  
  return !$('#select1 option:selected').remove().appendTo('#select2');  
 });  
 $('#remove').click(function() {  
  return !$('#select2 option:selected').remove().appendTo('#select1');  
 });  
});
17
这应该是被接受的答案--完全可行，无需任何插件。 - ThatAintWorking
返回(return)和!(非)是什么意思？ - alonso.torres
@alonso.torres 这是为了从 http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html 返回 false。为了防止页面在用户单击按钮时滚动到顶部（在某些浏览器中），我将 return false; 添加到单击事件处理程序中。 - ArieKanarie
10

我也遇到了同样的问题，但是我找到了一种解决方法。

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

如果想要添加一个按钮，可以在这里加上add >>以及jQuery的click选择器

例如：http://jsfiddle.net/diffintact/GJJQw/3/

10

尝试以下内容（摘自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>
非常简单的解决方案。这正是我正在寻找的。谢谢，Silas！ - marky
5
有一个名为crossSelect的jQuery插件似乎可以实现你想要的功能。
jQuery本身没有这个功能，你需要找到一个你喜欢的插件并使用它，或者编写自己的插件。（当然，你不一定必须使用jQuery来编写或使用它，如果愿意，你可以用纯javascript实现）。
2
上述链接现在已经失效。 - Jatin Dhoot
4
$('#boxa option').appendTo('#boxb');
2
0

这里是我的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 文件。
0
如果使用Bootstrap，我发现bootstrap-duallistbox非常方便。
  • 可过滤
  • 响应式
  • 本地化
  • 高度可定制化
  • 看起来维护得很好
0
如果您想要一个一次性选择和表单提交的快速解决方案，以便在单击时在两个选择器之间添加和删除选项。 

$(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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接