Permutation entre 2 listes...petit problème...

Signaler
Messages postés
29
Date d'inscription
lundi 27 mars 2006
Statut
Membre
Dernière intervention
17 janvier 2012
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Davince


Je développe principalement en CSS et Javascript.



J'essaie en vain de faire une permutation entre deux listes à l'aide d'un Javascript...
Je me prends la tête et ça ne marche pas...
Can someone help me?...
Je vois pas l'erreur ;-(

Voici mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript1.2" type="text/javascript"> 
function Deplacer(colonne_depart,colonne_arrivee)
{
 if(colonne_depart.options.selectedIndex==0){
 alert("Vous devez sélectionner une ville");
}
else{
choix=new Option(colonne_depart.options[colonne_depart.options.selectedIndex].text, colonne_depart.options[colonne_depart.options.selectedIndex].value);
colonne_arrivee.options[colonne_arrivee.options.length]=choix;
colonne_depart.options[colonne_depart.options[colonne_depart.options.selectedIndex]=null;
 }
}
</script>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>permutation_liste_choix</title>
</head> 
<body>
<form name="form" id="form" action="">
 <table>
<tr>
<td style="text-align:center; background-color:#999;">Villes de départ<br /> <select name="colonne_depart" size=9 style="width:120px; color:#933">
  
<option value="Bruxelles">Bruxelles</option>      
<option value="Berlin">Berlin</option> <option value="Copenhague">Copenhague</option> <option value="Dessau">Dessau</option><option value="Francfort">Francfort</option> <option value="Gérone">Gérone</option> <option value="Londres">Londres</option> <option value="Lyon">Lyon</option> <option value="Lisbonne">Lisbonne</option> </select>
 </td>
<td style="text-align:center; background-color:#CCC;"> <input type="button" value="Ajouter -->" onClick="Deplacer(this.form.colonne_depart,this.form.colonne_arrivee);"/> 
<br />
<br />
<input type="button" value="<-- Supprimer" onClick="Deplacer(this.form.colonne_arrivee,this.form.colonne_depart);"/> 
</td>
<td style="text-align:center; background-color:#999;">Villes d'arrivée<br /> 
<select name="colonne_arrivee" size=9 style="width:120px; color:#990">
<option value="10">-----------------</option>
</select>
 </td>
</tr>
</table>
<script language="javascript1.2" type="text/javascript"> document.form.colonne_arrivee.options.length=0; </script>
 <br />
Cliquez sur une ville puis sur &quot;Ajouter--&gt;&quot; ou &quot;&lt;--Supprimer&quot; </form>
</body>
</html>

4 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
bonjour à toi aussi,

déjà une erreur de syntaxe :
colonne_depart.options[colonne_depart.options[colonne_depart.options.selectedIndex]=null;
mieux vaudrait :
colonne_depart.options[colonne_depart.options.selectedIndex]=null;
sans préjuger du reste !

mais !
° avec FF, il faut regarder la console JavaScript
( avec opera c'est inutile, il l'affiche automatiquement )
° avec IE, il faut activer le debugger,
et mieux charge l'outil de debogage de windows
( j'ai mis une petite approcje dans un tuto, ici même )

et merci pour la question   Bul   

Site
Messages postés
29
Date d'inscription
lundi 27 mars 2006
Statut
Membre
Dernière intervention
17 janvier 2012

Davince


Je développe principalement en CSS et Javascript.



Bonjour, bonjour.
En tous cas, merci beaucoup Bultez...

Tu avais effectivemment vu juste!
Maintenant ça fonctionne impeccablement!

J'aimerais cependant signaler une autre erreur que j'ai remarquée et  qui occasionnait un ti bug dans le script...

J'avais écrit:

function Deplacer(colonne_depart,colonne_arrivee)
{
 if(colonne_depart.options.selectedIndex==0){
 alert("Vous devez sélectionner une ville");
}




alors qu'en fait, j'aurais dû écrire:
function Deplacer(colonne_depart,colonne_arrivee)
{
 if(colonne_depart.options.selectedIndex==""){
 alert("Vous devez sélectionner une ville");
}
Comme ça, tout marche...
Sinon, qd on sélectionne "Bruxelles", il affiche automatiquement l'alert(), ce qui n'est pas le but...

Encore un grand merci Bultez.

davince
Messages postés
29
Date d'inscription
lundi 27 mars 2006
Statut
Membre
Dernière intervention
17 janvier 2012

Davince


Je développe principalement en CSS et Javascript.

Euh... Ti rectificatif:




function Deplacer(colonne_depart,colonne_arrivee){
if(colonne_depart.options.selectedIndex==-1){
alert("Vous devez sélectionner une ville");
}

et pas comme je l'ai écrit juste avant:
function Deplacer(colonne_depart,colonne_arrivee){
if(colonne_depart.options.selectedIndex==""){
alert("Vous devez sélectionner une ville");
}


ce qui ne veut rien dire.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
c'est parce que lorsque le select a un size=1 ou est omis,
la 1ère ligne est sélectionnée par défaut,
ce qui est ch¤£µ§ !

plusieurs réponses pour palier à ça :

mettre :
   <select size=2 (au moins )...>

faire un test sur si ligne 0 sélectionnée :
    if(colonne_depart.selectedIndex==0){
       alert("Vous devez sélectionner une ville"); 
         }
   ( sans options ! )

mettre cet selectedIndex à -1
   <select... onfocus="this.selectedIndex=-1"...>

doit y avoir d'autres possibilités ( à part
   remplacer les select par d'autres balises )

cordialement   Bul   
Site