Manips de selects multiples

**StephG31** · 19/07/2006, 15h49

Bonjour,

J'ai à réaliser une petite interface de saisie en JS qui me pose qqes soucis.
Grosso modo je vais avoir une liste principale Select multiple sur la gauche de mon écran, et plusieurs listes Select également multiples sur la droite et je vais devoir pouvoir faire des Add/remove d'objets d'une des listes vers une autre avec mises à jour des contenus simultanément...

Je pense donc procéder avec des fonctions JS liées à mes boutons Add/Remove qui vont aller supprimer tels items de telle liste pour les ajouter dans telle autre.

Mon pb principal c'est que dans une liste Select multiple, on a un attribut "selectedIndex" qui si je ne me trompe pas indique la valeur de la première option selected dans la liste...
mais comment puis-je balayer ma liste et traiter toutes les options choisies par l'utilisateur via une boucle ??...
puis je faire un truc dans le genre
for (i=0; i < form.mySelect.length; i++)
if (form.mySelect.options[i].selected) ...
?

comment mettriez-vous à jour de manière la plus facile et rapide possible l'écran ?...
Ex: d'un côté ma liste L1 avec les items : o1,o2,o3,o5
de l'autre une liste L2 avec un seul item : o4
(si possible mes listes doivent être ordonnées alpha)
Je sélectionne o1 et o5 dans L1 et je fais un Add dans ma liste L2.
L1 devient donc : o2,o3
et L2 : o1,o4,o5

merci d'avance pour votre aide,

Stéphane

**StephG31** · 19/07/2006, 16h05

Enf ait comme je suis pas sûr d'être très clair

Puis-je modifier "en direct live" le contenu de mes Select ?...
Puis-je faire des manips style:
var newSelect = new (document.form.select); (???)
recomposer mon newSelect en balayant mes items sélectionnés et en supprimant/ajoutant ceux qu'il faut
et à la fin faire un document.form.oldSelect = newSelect

???

sinon, à ce que je crains, je risque d'être obligé de recomposer entièrement ma page via des document.write, isn't it ?... or ma page étant very very long, ça risque de s'avérer trrrrrrrès lourd...

auquel cas la soluce serait-elle de placer chacun de mes Select dans un DIV approprié et de ne maj que les DIV concernés par mes manips via des document.getElementById("mySelectDiv").innerHTML = monNouveauSelect
?

**FremyCompany** · 19/07/2006, 16h26

Bien sur que c'est possible ce que tu veux faire, mais je ne l'ai jamais fait, pour tout te dire...

Pourrais tu me donner un extrait de codes HTML ?
Je vais voir ce que je peux faire...

**StephG31** · 20/07/2006, 15h48

Bon à force de tatonner et grace à qqes exemples trouvés sur le web, je suis arrivé à peu près à mes fins.
Je donne donc mon code suivant qui pourra peut-être servir à d'autres personnes ayant le même besoin.

Par contre, n'étant pas un spécialiste JS et les manips d'objets "plus ou moins typés" me donnant parfois des migraines dans ce langage, il y a sûrement des choses pas très propres et améliorables, donc n'hésitez pas à me signaler des trucs qu'il vaudrait mieux que je change...

mon principe est donc de pouvoir déplacer d'une liste Select multiple à une autre (plusieurs en jeu dans mon cas concret) des data en les enlevant de la liste d'origine et en les ajoutant dans celle ciblee, tout en ordonnant alphabetiquement les contenus...

<html>
<head>

<script language="Javascript">

// fonction qui deplace les items selectionnes de la liste L1 a la liste L2
function moveData(L1,L2) {

var f = document.f;

if (L1.options.selectedIndex >= 0) {

// nouvelles listes construites au fur et a mesure
newL1 = new Array();
newL2 = new Array();
// indice de remplissage des nouvelles listes
iAddL1 = 0;
iAddL2 = 0;
// indices indiquant ou on en est dans la comparaison des listes Low/Medium/High existantes
iCompL2 = 0;

// on ajoute les data de L1 selectionnees dans L2, correctement ordonnees
// et en meme temps on reconstruit L1 en les y enlevant
for (i=0; i < L1.length; i++) {

// data a ajouter dans L2 et supprimer dans L1
if (L1.options[i].selected) {

// cas simple: liste L2 vide => on ajoute simplement l'item a la nouvelle liste
if (L2.length == 0) {
newL2[iAddL2++] = new Option(L1.options[i].text, L1.options[i].value);
}

// cas complexe: on reconstruit carrement toute la liste L2 en inserant l'item au bon endroit
else {
posTrouvee = false;
while ( (! posTrouvee) && (iCompL2 < L2.length) ) {

// on a trouve la position d'insertion
if (L1.options[i].text < L2.options[iCompL2].text) {
newL2[iAddL2++] = new Option(L1.options[i].text, L1.options[i].value);
posTrouvee = true;
}
// pas encore le bon endroit pour inserer, on recopie juste la data de L2 courante
else {
newL2[iAddL2++] = new Option(L2.options[iCompL2].text, L2.options[iCompL2].value);
iCompL2++;
}
}
// insertion en fin de liste si necessaire
if (! posTrouvee) {
newL2[iAddL2++] = new Option(L1.options[i].text, L1.options[i].value);
}
}
}

// data non selectionnee, il faut juste la conserver dans la liste L1
else {
newL1[iAddL1++] = new Option(L1.options[i].text, L1.options[i].value);
}

}

// on a balaye toute la liste L1 et traite les items selectionnes
// reste a recopier le restant s'il existe de la liste L2
for (i=iCompL2; i < L2.length; i++) {
newL2[iAddL2++] = new Option(L2.options[i].text, L2.options[i].value);
}

// reactualisation des listes : mise a vide et reconstruction
for (i=0; i < L1.length; i++) {
L1.options[i] = null;
}
for (i=0; i < newL1.length; i++) {
L1.options[i] = new Option(newL1[i].text, newL1[i].value);
}

for (i=0; i < L2.length; i++) {
L2.options[i] = null;
}
for (i=0; i < newL2.length; i++) {
L2.options[i] = new Option(newL2[i].text, newL2[i].value);
}

}

}

</script>
</head>

<body>

<form name="f">

<table cellspacing="10" cellpadding="10">
<tr valign="top">
<td rowspan=2><b>DATA</b><br>

<select name="SelectInputData" size=12 multiple>
<option value="1">Data 1</option>
<option value="2">Data 2</option>
<option value="3">Data 3</option>
<option value="4">Data 4</option>
<option value="5">Data 5</option>
<option value="6">Data 6</option>
<option value="7">Data 7</option>
<option value="8">Data 8</option>
<option value="9">Data 9</option>
<option value="10">Data 10</option>
</select>
</td>

<td><input type="button" value="    Add  >>>    " onClick="moveData

(document.f.SelectInputData,document.f.SelectInputLowData);">
<p></p>
<input type="button" value="<<< Remove" onClick="moveData

(document.f.SelectInputLowData,document.f.SelectInputData);"></td>

<td>
<b>Input LOW Data...</b>
<p></p>
<select name="SelectInputLowData" size=4 multiple>

</select>
</td>
</tr>

<tr valign="top">
<td><input type="button" value="    Add  >>>    " onClick="moveData

(document.f.SelectInputData,document.f.SelectInputHighData);">
<p></p>
<input type="button" value="<<< Remove" onClick="moveData

(document.f.SelectInputHighData,document.f.SelectInputData);"></td>

<td>
<b>Input HIGH Data...</b>
<p></p>
<select name="SelectInputHighData" size=4 multiple>

</select>
</td>
</tr>
</table>
</form>

</body>
</html>