Sujet Précédent Sujet Suivant

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

da vince Messages postés 29 Date d'inscription lundi 27 mars 2006 Statut Membre Dernière intervention 17 janvier 2012 - 7 août 2006 à 10:04
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 8 août 2006 à 10:30
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

Réponse 1 / 4
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
7 août 2006 à 10:23
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
0
Réponse 2 / 4
da vince Messages postés 29 Date d'inscription lundi 27 mars 2006 Statut Membre Dernière intervention 17 janvier 2012
7 août 2006 à 21:21
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
0
Réponse 3 / 4
da vince Messages postés 29 Date d'inscription lundi 27 mars 2006 Statut Membre Dernière intervention 17 janvier 2012
7 août 2006 à 22:06
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.
0
Réponse 4 / 4
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 août 2006 à 10:30
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
0
Rejoignez-nous