J'ai deux select sur ma page, un à gauche contenant une liste prédéfinie, un à droite qui est vide.
Je voudrais qu'en double cliquant à gauche, l'élément choisi passe à droite et disparaisse de gauche.
Inversement, en double cliquant à droite, l'élément de droite disparaît et repasse à gauche à sa position initiale.
Pour le moment j'arrive à faire passer les éléments de l'un à l'autre, à trier le select de droite, mais pas plus, d'autant que ma liste de gauche est classée avec des optgroup.
Le code que j'ai pour le moment est le suivant :
$LISTE_INGREDIENTS = array(1 => 'Épices & condiments','Desserts & pâtisseries','Produits laitiers','Légumes','Fruits','Céréales, farines & pâtes','Conserves','Poissons & fruits de mer','Viandes','Boissons');
echo "<FORM name='formulaire_recettes' action=''>";
echo "<select name='liste' id='Select_Liste' size='30' onDblClick='Ingredients(1);'>";
for($i=1 ; $i<=sizeof($LISTE_INGREDIENTS) ; $i++)
{
echo "<optgroup label='".$LISTE_INGREDIENTS[$i]."'>";
$result = mysql_query("SELECT * FROM $INGREDIENTS WHERE cat='$i' ORDER BY titre ASC");
while($row = mysql_fetch_array($result))
{
echo "<option value='".$row['id']."'>".$row['titre']."</option>";
}
echo "</optgroup>";
}
echo "</select>";
echo "<select name='ingredients' id='Select_Ingredients' size='30' onDblClick='Ingredients(2);'>";
for($i=1 ; $i<=sizeof($LISTE_INGREDIENTS) ; $i++)
{
}
echo "</select>";[javascript]function Ingredients(X)
{
var selectListe = document.getElementById('Select_Liste');
var selectIngredients = document.getElementById('Select_Ingredients');
// Ingrédients --> Liste
if(X == 1)
{
selectIngredients.options[selectIngredients.options.length] = new Option(selectListe.options[selectListe.selectedIndex].text, selectListe.options[selectListe.selectedIndex].value);
// Tri
Listatrier = new Array();
for(i=0 ; i<selectIngredients.options.length ; i++)
{
Listatrier = new Array();
Listatrier[0] = selectIngredients.options.text;
Listatrier[1] = selectIngredients.options.value;
}
Listatrier = Listatrier.sort();
for(i=0 ; i<selectIngredients.options.length ; i++)
{
selectIngredients.options.text=Listatrier[0];
selectIngredients.options.value=Listatrier[1];
}
}
// Liste --> Ingrédients
else
{
selectIngredients.options[selectIngredients.selectedIndex] = null;
}
}[/javascript]
Comme vous pouvez le constater, les optgroup proviennent d'une variable array écrite "en dur" dans le code PHP (cette liste n'a aucune raison d'évoluer), en revanche, les options sont dynamiques et proviennent d'une table sql.
Eeeuh voilà je crois que j'ai tout dit, j'espère avoir été clair et que mon problème inspirera un spécialiste
Edition : ça donne un truc qui ressemble à ça (la liste de droite n'a pas besoin d'être triée selon les optgroup)
