jQuery déplacement de sélectionner plusieurs valeurs à un autre MultiSelect

J'ai donc un Multiple de la boîte avec les valeurs de x qui j'ai besoin de la capacité à se déplacer vers un autre MultiSelect boîte et vice versa.

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

Besoin de déplacer tout ou partie des valeurs de boxa à boxb sur un clic de bouton, avec également la possibilité de déplacer les valeurs de retour de boxb à boxa.

N'jQuery avoir quelque chose comme cela ou est-ce une coutume extrait de code?

InformationsquelleAutor Phill Pafford | 2009-06-29
  1. 6

    Il y a un plugin jquery appelé crossSelect qui semble faire ce que vous voulez.

    jQuery n'a pas construit dans cette, vous devez soit trouver un plugin que vous aimez et utilisez-le, ou écrire votre propre. (Et bien sûr, vous n'avez pas ont utiliser jQuery pour écrire ou d'utiliser, vous pouvez mettre en œuvre en pur javascript si vous le souhaitez)

    • Parfait merci, c'est exactement ce dont j'avais besoin.
    • Le lien ci-dessus est mort maintenant.
    InformationsquelleAutor Tom Ritter
  2. 68
    $().ready(function() {  
 $('#add').click(function() {  
  return !$('#select1 option:selected').remove().appendTo('#select2');  
 });  
 $('#remove').click(function() {  
  return !$('#select2 option:selected').remove().appendTo('#select1');  
 });  
});
    • Ce doit être la accepté de répondre -- fonctionne parfaitement avec aucun plugin requis.
    • Qu'est-ce que le retour et le ! pour?
    • c'est pour le retour de faux, à partir de blog.jeremymartin.nom/2008/02/...: Pour éviter la page de défilement vers le haut à chaque fois qu'un utilisateur clique sur un bouton (dans certains navigateurs), j'ai ajouté return false; pour les gestionnaires d'événements click.
    InformationsquelleAutor Yasitha
  3. 10

    Essayez ce qui suit
    (prises de 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>
    • Solution très simple. C'est exactement ce que je cherchais. Merci, Silas!
    InformationsquelleAutor Silas Palmer
  4. 8

    J'ai eu le même problème mais j'ai trouvé un moyen de contourner cela 

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

    si vous voulez un bouton ajouter un add >>
    et jquery cliquez sur le sélecteur de ici

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

    InformationsquelleAutor jai
  5. 2
    $('#boxa option').appendTo('#boxb');
    InformationsquelleAutor Vijayakrishna
  6. 2

    Si vous êtes bien avec le plugin, ce plugin fonctionne bien.

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

    InformationsquelleAutor Laxman More
  7. 0

    Voici mon code 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>

    et du code Javascript

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

    Assurez-vous que vous avez importé jquery.js fichier.

    InformationsquelleAutor Santosh
  8. 0

    Si en utilisant Bootstrap, j'ai trouvé bootstrap-duallistbox assez pratique.

    • Filtrables
    • Sensible
    • Localizable
    • Hautement personnalisable
    • Semble bien entretenues
    InformationsquelleAutor Pierre de LESPINAY