首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery将MultiSelect值移动到另一个MultiSelect

jQuery将MultiSelect值移动到另一个MultiSelect
EN

Stack Overflow用户
提问于 2009-06-29 14:07:51
回答 7查看 32.4K关注 0票数 21

所以我有一个带有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有没有类似的东西,或者这是一个自定义的代码片段?

EN

回答 7

Stack Overflow用户

发布于 2011-12-02 21:18:53

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

Stack Overflow用户

发布于 2013-04-03 11:04:58

尝试以下内容(取自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> 
票数 10
EN

Stack Overflow用户

发布于 2013-09-24 18:07:47

我也有同样的问题,但我找到了一个解决方法

<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/

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1058517

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档