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>