jQuery將MultiSelect值移動到另一個MultiSelect

因此，我有一個帶有x值的MultiSelect框，我需要移動到另一個MultiSelect框的能力，反之亦然。jQuery將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的值的全部或一個盒B上的按鈕點擊，也從BOXB移動值回BOXA的能力。

jQuery是否有這樣的事情，或者這是一個自定義的代碼片段？

來源

2009-06-29 Phill Pafford

有一個名爲crossSelect的jquery插件，它似乎是做你想做的。

jQuery沒有這個內置的，你需要找到一個你喜歡的插件並使用它，或者自己寫。（當然，你不有使用jQuery編寫或使用它，你可以，如果你想實現它的純JavaScript）

來源

2009-06-29 14:16:47

完美的感謝，這正是我需要的。 – 2009-06-29 14:23:13

上述鏈接現已停止。 – 2016-04-06 06:54:21

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

來源

2011-03-14 07:27:45 Vijayakrishna

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

來源

2011-12-02 13:18:53 Yasitha

+16

這應該是被接受的答案 - 完美地工作，不需要插件。 – ThatAintWorking 2013-01-17 21:56:32

請嘗試以下（從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>

來源

2013-04-03 03:04:58

我有同樣的問題，但我發現它周圍

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

來源

2013-09-24 10:07:47 jai

這裏去我的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文件。

來源

2015-12-18 04:50:05 Santosh

如果你用插件很好，這個插件確實很好。

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

來源

2016-04-12 13:32:28