发表新帖
发表新帖

jQuery moving MultiSelect values to another MultiSelect

前端 未结
关注
8 1274
感情败类
感情败类 2020-12-23 12:27

So I have a MultiSelect box with x values which I need the ability to move to another MultiSelect box and vise versa.
提交评论
  •  加载中...
  • 一个人的身影
    2020-12-23 13:03

    If you are fine with plugin, this plugin does work well.

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

    0 讨论(0)
  • 闹比i
    2020-12-23 13:09

    Try the following (taken from 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>
    0 讨论(0)
  • 梦毁少年i
    2020-12-23 13:09

    I had same problem but i found out a way around it 

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

    if want a button add a add >> and jquery click selector here

    example http://jsfiddle.net/diffintact/GJJQw/3/

    0 讨论(0)
  • 花落未央
    2020-12-23 13:10

    If using Bootstrap, I found bootstrap-duallistbox quite handy.

    • Filterable
    • Responsive
    • Localizable
    • Highly customizable
    • Seems well maintained
    0 讨论(0)
  • 执笔经年
    2020-12-23 13:11 
    $('#boxa option').appendTo('#boxb');
    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题