Discussion :

[findjo]

Bonsoir à tous

J'ai deux champs de formulaire que voici:



Les deux combos m'affichent la liste des gares qui se trouve dans ma base de données et voici leurs différents codes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//Combo gare de départ
<div class="form-group col-xs-5">
	<select id="" class="form-control" name="garedepart">
		<option selected>Sélectionner la gare de départ</option>
			<?php 
                             $garedepart = $con->query("SELECT * FROM gare ORDER BY IdGare DESC");
                             while ($donnees2 = $garedepart->fetch()) {
                                        echo '<option value="'.$donnees2['IdGare'].'">'.$donnees2['NomGare'].
                '</option>';
                              }                                 
                         ?>	
	</select>
</div>
 
 
//Combo gare d'arrrivée
<div class="form-group col-xs-5">
	<select id="" class="form-control" name="garearrivee">
		<option selected>Sélectionner la gare d'arrivée</option>
		     <?php 
                            $garedepart = $con->query("SELECT * FROM gare ORDER BY IdGare DESC");
                            while ($donnees2 = $garedepart->fetch()) {
                                        echo '<option value="'.$donnees2['IdGare'].'">'.$donnees2['NomGare'].
                '</option>';
                             }                                  
                      ?>			
	</select>
</div>

Je souhaite que lorsque l'utilisateur à sélectionner la gare de départ et que le combo gare d'arrivée prend le focus, la liste des gares qui s'y affichent ne comprennent plus la gare de départ vu qu'elle a déjà été sélectionner.

[NoSmoking]

Bonjour,
le plus ergonomique me semble quand même de disposer de deux listes identiques et de tester avant toutes autres choses que la gare de départ est différente de la gare d'arrivée et si cela est le cas afficher un joli message.

Mais pourquoi j'écris cela, simplement parce que si tu veux envisager les cas où la gare d'arrivée est choisie avant la gare de départ, on n'est pas dans la tête des internautes pour connaitre leur logique, il va te falloir le gérer également, mais cela est facile mais la première fois seulement.
Si l'internaute choisi une autre gare de départ alors qu'il a déjà sélectionné une gare d'arrivée il va te falloir mettre à jour la liste gare d'arrivée en restaurant son choix, ceci est également simple mais c'est tous les cas prévisibles qui vont compliquer ta fonction.

[01001111]

peut-être que l'idée est de faire ceci:
Attention, par contre ce choix peut-être faire l'objet d'une modification, il faut donc retenir le noeud à effacer pour le remettre ensuite sur un nouveau choix de gare de départ.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<div class="form-group col-xs-5">
	<select id="garedepart" class="form-control" name="garedepart" onchange="focusAndSuppressOneCoice(this.value);">
		<option selected>Sélectionner la gare de départ</option>
			<?php 
                             $garedepart = $con->query("SELECT * FROM gare ORDER BY IdGare DESC");
                             while ($donnees2 = $garedepart->fetch()) {
                                        echo '<option value="'.$donnees2['IdGare'].'">'.$donnees2['NomGare'].
                '</option>';
                              }                                 
                         ?>	
	</select>
</div>
 
 
//Combo gare d'arrrivée
<div class="form-group col-xs-5">
	<select id="garearrivee" class="form-control" name="garearrivee">
		<option selected>Sélectionner la gare d'arrivée</option>
		     <?php 
                            $garedepart = $con->query("SELECT * FROM gare ORDER BY IdGare DESC");
                            while ($donnees2 = $garedepart->fetch()) {
                                        echo '<option value="'.$donnees2['IdGare'].'">'.$donnees2['NomGare'].
                '</option>';
                             }                                  
                      ?>			
	</select>
</div>
<script type="text/javascript">
var clone, cloneIndex;
function focusAndSuppressOneCoice(value) {
      if (clone && !isNaN(cloneIndex)) {
             document.querySelector("#garearrivee").insertBefore(clone, document.querySelector("#garearrivee").childNodes[cloneIndex]);
      }
      var child=document.querySelector("#garearrivee").querySelector('option[value='+value+']');
      clone=child.cloneNode(false);
      cloneIndex=0;
      while((child = child.previousSibling) != null ) 
            cloneIndex++;
      document.querySelector("#garearrivee").removeChild(child);
      document.querySelector("#garearrivee").focus();
}
</script>

[findjo]

01001111

ça ne marche pas

[01001111]

dsl, deux erreurs:
option[value=...] doit comprendre des guillemets

et il faut copier l'élément child avant de chercher son index

code:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var clone, cloneIndex;
function focusAndSuppressOneCoice(value) {
      	if (clone && !isNaN(cloneIndex)) {
            	document.querySelector("#garearrivee").insertBefore(clone, document.querySelector("#garearrivee").childNodes[cloneIndex]);
      	}
      	var child=document.querySelector("#garearrivee").querySelector('option[value="'+value+'"]');
      	clone=child.cloneNode(false);
      	cloneIndex=0;
      	if (child) {
      		var c=child;
      		while((c = c.previousSibling) != null ) 
            		cloneIndex++;
     	 	document.querySelector("#garearrivee").removeChild(child);
      		document.querySelector("#garearrivee").focus();
      	}
}

[findjo]

01001111

Le code que vous venez d'écrire fonctionne seulement qu'il y a un tout petit problème.

Lorsque que je sélectionne une ville dans premier combo et que je viens sélectionner une autre ville dans le deuxième combo, La première ville qui a été sélectionnée dans le combo 1 n'apparaît pas dans le combo 2, ce qui est normal.Je sélectionne donc une autre ville. Ensuite (En même temps) je change la ville qui se trouvait dans le combo 1 pour sélectionner une autre ville. Et lorsque je veux sélectionner la ville dans le combo 2, je ne vois plus la ville la première ville qui a été sélectionnée dans la liste des villes du combo 2 mais je vois plutôt un espace vide à la place.

Exemple:

Première tentative de choix: Combo 1 :Lyon - Combo 2 : Nice Correcte rien a signaler car Paris n'apparaît pas dans le combo 2

Deuxième tentative de choix :Combo 1 : Marseille - Combo 2 : Bastia Là se trouve le problème car Lyon ne s'affiche plus dans le combo 2. il y a plutôt un espace blanc sans doute dû à la fonction RemoveChid.

[01001111]

remplacez cloneNode(false) par cloneNode(true) svp, je ne pensais pas que ce booléen concernait le texte aussi