| <html> <head>
<title> Java script </title>
</head>
<body>
<H2><font color="#800000">Selection de paramètres par échanges de
listes</font></H2>
<P align="left">
<!-- L'ensemble des composants utilisés est défini dans
une "form" en HTML (2 étiquettes, 2 boites de liste et 3 boutons -->
<FORM name="choixmultipl">
<!--Pour des raisons de présentation je mets mes
composants dans un tableau-->
<table border="1" width="60%" bordercolor="#FFFFFF">
<tr>
<td width="25%"
bordercolor="#FFFFFF">
<p align="center">
<B><font color="#0000FF"> Mots clés
possibles:</font></B> <!--1iere étiquette-->
</td>
<td width="5%" rowspan="2">
<p align="center"> <!--Création de 2 boutons dans la même
cellule-->
<input type="button" onClick="ajouter()"
value=">>"> <!--Un clic sur ce bouton démarre la fonction
javaScript "ajouter()" -->
</p>
<p align="center">
<input type="button" onClick="enlever()"
value="<<"> <!--Un clic sur ce bouton démarre la fonction
javaScript "enlever()" -->
</td>
<td width="25%">
<p align="center">
<B><font color="#0000FF">Mots clés choisis:</font></B>
<!--2ieme étiquette-->
</td>
</tr>
<tr>
<td width="25%">
<p align="center">
<!--
ci-dessous la première liste. Comme je n'ai pas compris comment fixer la taille de la
fenêtre, j'ai
utilisé les artifices suivants:
* j'ai fixé la taille(i.e le nombre d'éléments à nombre d'éléments utiles =1)
* Le dernier élément à la valeur vide et présente une chaîne d'espaces ( )
qui fixe la largeur
* le centrage les textes des éléments est fait en rajoutant un certain nombre d'espaces
devant chaque texte.
-->
<select name="liste_mc" size=7
ondblclick="ajouter()" > <!--Un double-clic sur élément démarre la
fonction javaScript "ajouter()" -->
<div align="center">
<option value="roux"><div
align="center"> roux
</div>
<option
value="blond"> blond
<option value="chatain"> chatain
<option
value="brun"> brun
<option
value="gris"> gris
<option
value="blanc"> blanc
<option
value="">  
</select>
</td>
<td width="25%">
<p align="center">
<!--
ci-dessous la deuxième liste. Pour qu'elle ait la même apparence que la première je lui
ai donné la même
taille et l'ai rempli d'éléments vides identiques au dernier élément de la liste 1.
-->
<select name="choix_mc" size=7 ondblclick="enlever()"> <!--Un
double-clic sur élément démarre la
fonction javaScript "enlever()" -->
<option
value="">  
<option
value="">  
<option
value="">  
<option
value="">  
<option
value="">  
<option
value="">  
<option
value="">  
</select>
</td>
</tr>
</table>
<p align="right"> </p>
<p align="left"><input
type="button" onClick="recu()" value=" Terminer "
></p>
<!--Un clic sur ce bouton démarre la fonction javaScript
"recu()" -->
<Table>
<tr>
<td>
<p align="left">
</Table>
</FORM>
</body>
<!--
En dehors du corps HTML balisé par <body>...</body>, je définis le script
JavaScript qui va traiter les événements définis plus haut
sur les composants dans la "FORM" HTML. Ces traitements correspondent à l'appel
de 4 fonctions: ajouter(),enlever() ,recu() et ranger().
-->
<!--******->
<script language="JavaScript">
//******// Initialisation des variables communes à toutes les fonctions
var motcles_choisis= new Array(7);
var motclesT_choisis= new Array(7);
var la_liste1 = window.document.choixmultipl.liste_mc ;
var la_liste2 = window.document.choixmultipl.choix_mc;
var position_list1 = la_liste1.options.length; // Pointeur sur la liste 1 à l'avant
dernier élément (i.e. dernier élément utile)
var position_list2 = 0; // Pointeur sur la liste 2 au premier élément
//**ranger();
//******
function ajouter()
{
for (loop=0 ; loop < la_liste1.options.length ; loop++) // Boucle sur tous les indices
(loop) de la liste 1, du premier au dernier.
{
if (la_liste1.options[loop].selected == true) // Vérifie que l'élément d'indice (loop)
de la liste 1 est bien celui selectionné.
{
if (la_liste1.options[loop].value != "") // Vérifie que la valeur de cet
élément n'est pas vide.
{
motcles_choisis[loop]=la_liste1.options[loop].value; // Met cette valeur dans la liste des
éléments choisis.
motclesT_choisis[loop]=la_liste1.options[loop].text; // Met celabel dans la liste des
éléments choisis.
la_liste2.options [position_list2]=new Option
(motclesT_choisis[loop],motcles_choisis[loop],false,false) ;
// Remplace l'élément de rang courant de la liste 2 par ce dernier élément choisi.
position_list2++ ; // Repositionne le pointeur de la liste 2 sur l'élément suivant.
position_list1-- ; // Repositionne le pointeur de la liste 1 sur l'élément précedent
for(i=loop; i<position_list1; i++) // Boucle sur tous les indices au-dessus de
l'élément selectionné dans la liste 1
{
la_liste1.options[i]=new Option (
la_liste1.options[i+1].text,la_liste1.options[i+1].value,false,false);
//Décalle chacun des éléments concernés d'un rang vers le bas l'élément vide de
formattage en fin de liste vient
//effacer l'élément qui le précède.
}
}
}
}
ranger();
}
//********
function enlever()
{
for (loop=0 ; loop < la_liste2.options.length ; loop++) // Boucle sur tous les indices
(loop) de la liste 2, du premier au dernier.
{
if (la_liste2.options[loop].selected == true) // Vérifie que l'élément d'indice (loop)
de la liste 2 est bien celui selectionné.
{
if (la_liste2.options[loop].value != "") // Vérifie que la valeur de cet
élément n'est pas vide.
{
motcles_choisis[loop]=la_liste2.options[loop].value; // Met cette valeur dans la liste des
éléments choisis.
motclesT_choisis[loop]=la_liste2.options[loop].text; // Met ce label dans la liste des
éléments choisis.
la_liste1.options[(position_list1-1)]=new Option
(motclesT_choisis[loop],motcles_choisis[loop],false,false) ;
// Remplace l'élément de rang -1 de la liste 1 par ce dernier élément choisi.
position_list2-- ; // Repositionne le pointeur de la liste 2 sur l'élément précedent
position_list1++ ; // Repositionne le pointeur de la liste 1 sur l'élément suivant.
for(i=loop; i<position_list2+1; i++) // Boucle sur tous les indices au-dessus de
l'élément selectionné dans la liste 2
{
la_liste2.options[i]=new Option (
la_liste2.options[i+1].text,la_liste2.options[i+1].value,false,false);
//Décalle chacun des éléments concernés d'un rang vers le bas l'élément vide de
formattage en fin de liste vient
//effacer l'élément qui le précède.
}
}
}
}
ranger();
}
//******
function recu()
{
var message="liste selectionnée: \n\t" // Initialise la variable message
for (i=0 ; i < la_liste2.options.length ; i++) // Boucle sur tous les éléments de la
liste 2.
{
if (la_liste2.options[i].value != "") // Quand la valeur de l'élément n'est
pas vide
{
message += la_liste2.options[i].value + "\n\t" ; // Je rajoute à message la
valeur de l'élément suivi d'un retour à la ligne
// et d'une tabulation.
}
}
alert(message); // J'ouvre une boite "Alert" avec le message
"message".
}
//******
function ranger() //permet d'ordonner les listes par ordre alphabetique
{
lo1=new Array(la_liste1.options.length);//tableau pour la liste1
lo2=new Array(la_liste2.options.length);//tableau pour la liste2
for (i=0;i<la_liste1.options.length ; i++) //pour chaque element de la liste 1
{
lo1[i]=new Array(2); //simule un tableau à 2 dimensions (valeur et étiquette)
lo1[i][0]=la_liste1.options[i].value; //remplit le tableau avec chaque
lo1[i][1]=la_liste1.options[i].text; //element de la liste 1
}
for (i=0;i<la_liste2.options.length ; i++) //pour chaque
element de la liste 2
{
lo2[i]=new Array(2); //simule un tableau à 2 dimensions (valeur et étiquette)
lo2[i][0]=la_liste2.options[i].value; //remplit le tableau avec chaque
lo2[i][1]=la_liste2.options[i].text; //element de la liste 2
}
j1=0;
lo1triee= lo1.sort(); //ordonne le tableau cree dans un nouveau tableau: lo1triee
for (i=0;i<la_liste1.options.length ; i++) //Pour tous les elements de ce tableau
{
if (lo1triee[i][0] != "") //et tand que l'element n'est pas vide
{
la_liste1.options[j1]=new Option (lo1triee[i][1],lo1triee[i][0],false,false);//je reecrit
la liste 1
j1++;
}
}
j2=0;
lo2triee= lo2.sort(); //ordonne le tableau cree dans un nouveau tableau: lo2triee
for (i=0;i<la_liste2.options.length ; i++) //Pour tous les elements de ce tableau
{
if (lo2triee[i][0] != "") //et tand que l'element n'est pas vide
{
la_liste2.options[j2]=new Option (lo2triee[i][1],lo2triee[i][0],false,false);//je reecrit
la liste 1
j2++;
}
}
}
//******
</script>
<!--*****-->
</html>
|