web-dev-qa-db-ja.com

MultiSelect値を別のMultiSelectに移動するjQuery

そのため、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の値のすべてまたは1つをboxbに移動する必要があります。また、値をboxbからboxaに戻す機能もあります。

JQueryにはこのようなものがありますか、それともこれはカスタムコードスニペットですか？

jqueryselect
21
Phill Pafford

crossSelect というjqueryプラグインがあります。これはあなたが望むことをしているようです。

jQueryにはこれが組み込まれていません。好きなプラグインを見つけて使用するか、独自のプラグインを作成する必要があります。 （もちろん、jQueryを使用して記述または使用する必要はありません、必要に応じて純粋なJavaScriptで実装できます）

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

次のことを試してください（ 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
Silas Palmer

私は同じ問題を抱えていましたが、それを回避する方法を見つけました

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

8
jai

プラグインに問題がなければ、このプラグインはうまく機能します。

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

2
Laxman More
$('#boxa option').appendTo('#boxb');
2
Vijayakrishna

これが私の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
Santosh

Bootstrapを使用している場合、 bootstrap-duallistbox が非常に便利であることがわかりました。

  • フィルタリング可能
  • レスポンシブ
  • ローカライズ可能
  • 高度にカスタマイズ可能
  • 手入れが行き届いているようです
0
Pierre de LESPINAY