jQuery przenoszenie wartości MultiSelect do innego MultiSelect

Mam więc pole MultiSelect z wartościami x, które muszę przenieść do innego pola MultiSelect i vice versa.jQuery przenoszenie wartości MultiSelect do innego 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>

trzeba przenieść całość lub jedną z wartości boxa do BoxB na kliknięcie przycisku, również z możliwością przemieszczania się wartości z powrotem BoxB do boxa.

Czy jQuery ma coś takiego lub jest to niestandardowy fragment kodu?

Źródło

2009-06-29 Phill Pafford

Istnieje wtyczka jquery o nazwie crossSelect, która wydaje się robić to, co chcesz.

jQuery nie ma tego wbudowanego, musisz albo znaleźć wtyczkę, którą lubisz i użyć, albo napisać własną. (I oczywiście nie zrobisz mieć użyć jQuery pisać lub używać go, można wdrożyć go w czystym JavaScript, jeśli chcesz)

Źródło

2009-06-29 14:16:47

Perfekcyjne dzięki, to jest dokładnie to, co potrzebne. –

Powyższy link jest już martwy. –

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

Źródło

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

Źródło

2011-12-02 13:18:53 Yasitha

+16

To powinna być zaakceptowana odpowiedź - działa idealnie bez wymaganej wtyczki. – ThatAintWorking

Jaki jest zwrot i! dla? –

@ alonso.torres, który jest przeznaczony do zwrócenia false, z http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html: _Aby zapobiec przewijaniu strony na górę za każdym razem, gdy użytkownik klika przycisk (w niektórych przeglądarkach), dodałem return false; do obsługi zdarzeń click._ – ArieKanarie

Wypróbuj następujące (zaczerpnięte z 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>

Źródło

2013-04-03 03:04:58

Bardzo proste rozwiązanie. Właśnie tego szukałem. Dzięki, Silas! – marky

miałem ten sam problem, ale okazało się, sposób wokół niego

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

jeśli chce się przycisk dodaj dodać > > i kliknij selektor jQuery tutaj

przykład http://jsfiddle.net/diffintact/GJJQw/3/

Źródło

2013-09-24 10:07:47 jai

Tu idzie mój kod 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>

i kod Javascript

$("#add").click(function(){ 
    $("#select1 option:selected").remove().appendTo($("#select2")); 
}) 
$("#remove").click(function(){ 
    $("#select2 option:selected").remove().appendTo($("#select1")); 
})

Upewnij się, że zaimportowano plik jquery.js.

Źródło

2015-12-18 04:50:05 Santosh

Jeśli nie masz nic przeciwko wtyczce, ta wtyczka działa dobrze.

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

Źródło

2016-04-12 13:32:28