2010-03-08 8 views
0

J'essaie de comprendre comment créer un formulaire multisélect qui a deux sélections qui vous permettent de déplacer les critères dans un troisième select. Je l'ai jeter un oeil à:jquery multiselect de deux sélectionne en un?

http://www.quasipartikel.at/multiselect/

et

// http://www.erichynds.com/jquery/jquery-multiselect-plugin-with-themeroller-support/ (je suis nouveau, donc je ne peux pas poster un lien ... :-))

mais ils ont tous les deux l'air de ne permettre qu'une sélection en tête-à-tête, plutôt que le deux-à-un que je voudrais implémenter ...

Quelque chose comme ceci:

<!-- user selects multiple values from this and the selected options are moved to third select onclick --> 
<select id="select1" name="select1[]" multiple="multiple"> 
<option value="1">1</option> 
<option value="1">1</option> 
<option value="1">1</option> 
<option value="1">1</option> 
<option value="1">1</option> 
</select> 

<!-- user also selects multiple values from this and the selected options are moved to third select onclick --> 
<select id="select2" name="select2[]" multiple="multiple"> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
<option value="d">d</option> 
<option value="e">e</option> 
</select> 

<!-- this is the target for the previously selected options --> 
<select id="target" name="target[]" disabled> 
<!-- all of the selected options from select1 and select2 are placed here onclick --> 
</select> 

Est-ce possible? Quelqu'un at-il un exemple de travail, ou un lien qui illustre ce genre de chose?

Répondre

1

Vous avez besoin d'un bouton avec un identifiant de « ajouter »

faire des sélections cliquez sur le bouton Ajouter

avec ce code attaché au bouton

$('#add').click(function() { 
return !$('#select1 option:selected,#select2 option:selected').appendTo('#target'); 
}); 
+1

Est-ce que revenir effectivement faux pour arrêter la l'action de clic par défaut lors de l'exécution du code, parce que c'est génial Je ne savais pas que vous pouviez faire cela – ryanulit

+0

Cela fonctionne aussi, vous n'avez pas besoin de supprimer car appendTo par défaut déplace l'élément depuis le début select and into la cible sélectionnée – ryanulit

+0

yup. essayez-le – mcgrailm

0

Vous pouvez être en mesure d'adapter cela à vos besoins:

$(function() { 
    $("#select1, #select2").change(function() { 
     $("#target").append($(":selected", $(this)).remove()); 
    }); 
}); 

Il trouve l'élément sélectionné dans le menu déroulant, l'enlève, et il ajoute à la liste déroulante cible.