<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Manipulation des liste de choix</title>
<style>
BODY {font-family: Arial; font-size: 10pt}
</style>
</head>
<body>
<script language="javascript">
<!--
function deplacer_elements(de, vers) {
var F = document.form1;
var elements1 = "items_" + de + "[]";
var elements2 = "items_" + vers + "[]";
if (F.elements[elements1].options.selectedIndex >= 0) {
/* boucle tant qu'il reste des éléments sélectionnés */
while (F.elements[elements1].options.selectedIndex >= 0) {
/* index de l'élément sélectionné */
index = F.elements[elements1].options.selectedIndex;
/* /texte de l'élément sélectionné */
texte = F.elements[elements1].options[index].text;
/* valeur de l'élément sélectionné */
valeur = F.elements[elements1].options[index].value;
/* suppression de l'élément sélectionné dans la liste d'origine */
F.elements[elements1].options[index] = null;
-
/* création de l'élément dans la liste accueillante */
var user = new Option(texte, valeur);
nb_elements = F.elements[elements2].options.length; // nbre d'éléments dans la liste accueillante
F.elements[elements2].options[nb_elements] = user;
}
}
else
alert("Aucun Item sélectionné !");
-
return(false);
}
//-->
</script>
<form name="form1">
<table border="0" width="280" cellspacing="0" cellpadding="0">
<tr>
<td width="45%" align="center" valign="top">
<select size="7" name="items_gauche[]" multiple>
<option>Renault</option>
<option>Nissan</option>
<option>Peugeot</option>
<option>Ford</option>
<option>BMW</option>
<option>Ferrari</option>
<option>Mercedes</option>
<option>Fiat</option>
<option>Jaguar</option>
<option>Opel</option>
<option>Subaru</option>
<option>Volvo</option>
<option>Porsche</option>
<option>Mazda</option>
</select>
</td>
<td width="10%" align="center" valign="middle"><input type="button" value=">>" name="droite" onClick="return deplacer_elements('gauche', 'droite')">
<p><input type="button" value="<<" name="gauche" onClick="return deplacer_elements('droite', 'gauche')"></p>
</td>
<td width="45%" align="center" valign="top">
<select size="7" name="items_droite[]" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Cliquez pour agrandir
