Discussion :

[camcam8782]

Bonjour,
J'ai sur ma page Web plusieurs Select liés entre eux (liste deroulante dynamique classique). Sur la première, on choisit un Pays, la seconde une Region, la troisième une Ville.

Lorsque l'on choisit un pays, disons la France, j'appel via une fonction Ajax la page PHP (ici ajax_region.php) permettant de recuperer dans ma base de donnée l'ensemble des région de France et de d'actualiser le select Region.

Meme chose ensuite lorsque l'on selectionne une des region affichée pour les villes.

Mon code fonctionne très bien sur Firefox mais ne fonctionne sur Explorer que lors de la selection d'un pays (le select du pays n'est pas modifié). Donc en gros, je n'arrive pas à recuperer la Value d'un select modifié dynamiquement par Ajax sous Explorer... Sauriez vous comment contourner ce probleme?

Merci d'avance

Code html de départ:

Code php :

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
<span class="element_filtre">
		<label>Pays</label>
				<select name="pays" id="pays" onchange="go_pays()">
					<option id="pays" value='-1' selected="selected">Choisir un pays</option>
					<?php
						mysql_connect("localhost","root");
						mysql_select_db("mess");
						$res = mysql_query("SELECT * FROM pays ORDER BY id");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["pays"]."'>".$row["pays"]."</option>";
						}
					?>
				</select>
		</span>
		<span class="element_filtre">
		<label>Region</label>
				<span id="id_region" style="display:inline">
				<select id="region" name="region" onchange="go_region()">
					<option value='-1' selected="selected">Choisir un pays</option>
					<option value='Alsace' selected="selected">Alsace</option>
				</select>
				</span>
		</span>
		<span class="element_filtre">
		<label>Ville</label>
				<div id='id_ville' style='display:inline'>
				<select id="ville" name="ville" onchange="go_ville(this.value)">
					<option value='-1' selected="selected">Choisir un pays</option>
				</select>
				</div>
		</span>

Fonction ajax :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function go_pays() {
 
	var paraTag = $('#id_region');
    $(paraTag).children('#region').remove();
 
	sel = document.getElementById('pays');
	id_pays = sel.options[sel.selectedIndex].text;
 
	$.ajax({
            type: 'post',
            url: 'php/ajax_pays.php',
            data: 'pays=' + id_pays,
 
            success: function(results) {
                $(paraTag).html(results);
            }
		}); // end ajax
	$('#id_ville').children('#ville').remove();
	$('#id_ville').append("<select id='ville' name='ville'><option value='-1' selected='selected'>Choisir une région</option> </select>");
 
}
 
function go_region() {
 
	var paraTag = $('#id_ville');
    $(paraTag).children('#ville').remove();
 
	sel = document.getElementById('region');
	id_region = sel.options[sel.selectedIndex].text;
	alert("region debut");
	alert(id_region);
 
	$.ajax({
            type: 'post',
            url: 'php/ajax_region.php',
            data: 'region=' + id_region,
 
            success: function(results) {
                $(paraTag).html(results);
            }
		}); // end ajax
	$('#id_lieu').children('#lieu').remove();
	$('#id_lieu').append("<select id='lieu' name='lieu'><option value='-1' selected='selected'>Choisir une ville</option> </select>");
 
}

Page ajax_pays.php :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
	header('Content-Type: text/html; charset=iso-8859-1');
	$pays=$_POST["pays"];
	if(isset($_POST["pays"])){
		echo "<select id='region' name='region' onchange='go_region()'>";
		echo "<option value='-1' selected='selected' >Choisir une région</option>";
		mysql_connect("localhost","root");
		mysql_select_db("mess");
		$res = mysql_query("SELECT DISTINCT region FROM wall WHERE pays='$pays' ORDER BY region");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["region"]."'>".$row["region"]."</option>";
		}
	}
	echo "</select>";
?>

Page ajax_region.php :

Code php :

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
<?php
	header('Content-Type: text/html; charset=iso-8859-1');
	$region=$_POST["region"];
	if(isset($_POST["region"])){
		echo "<select id='ville' name='ville' onchange='go_ville()'>";
		echo "<option value='-1' selected='selected'>Choisir une ville</option>";
		mysql_connect("localhost","root");
		mysql_select_db("mess");
		$res = mysql_query("SELECT DISTINCT ville FROM wall WHERE region='$region' ORDER BY ville");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["ville"]."'>".$row["ville"]."</option>";
		}
		echo "<option value='Autres'>Autres</option>";
	}
	echo "</select>";
?>

[Bovino]

Les événements situés dans les balises (onchange) sont du JavaScript et ne sont pas évalués (contrairement aux scripts entre balises <script> puisqu'il semble que tu utilises jQuery).
Il faut donc les définir dans ta fonction callback :

Code :

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

1
2
3
4
success: function(results) {
    $(paraTag).html(results);
    $('#region').change(function(){go_region()});
}

[camcam8782]

Merci pour votre correction, c effectivement plus propre.

Neanmoins, cela ne fonctionne toujours pas sous Explorer lorsque l'on selectionne une des options du deuxième Select (region).

Apparement, le bug intervient lors de la ligne

id_region = sel.options[sel.selectedIndex].text;


Avez vous une idée? C'est apparement un probleme propre a Internet Explorer mais je n'ai trouvé aucune piste pour le résoudre...

[Bovino]

Tu as essayé avec le value plutôt que le text ?

Code :

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

id_region = sel.options[sel.selectedIndex].value;

[camcam8782]

oui, meme constat avec value, cela marche tres bien sous Firefox mais reste bloqué sous Explorer à cet endroit...

[andry.aime]

Salut,
Essaie avec

Code :

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

1
2
 
                $(paraTag).trigger("update");

[camcam8782]

Je ne suis pas sur de l'avoir mis au bon endroit mais apres plusieurs essais, cela ne marche toujours pas sous Explorer...

[camcam8782]

Quelqu'un a-t-il une idée sur ce probleme de compatibilité entre Explorer et Javascript lorsque les options d'un select sont modifiés dynamiquement?

[E.Bzz]

Bonjour,
pour IE :
il faut que la réponse Ajax renvoie le select complet (<select>+options+</select>), et non seulement les option, mais ça tu le fais déjà
si le select est inclus dans un <form> (non visible dans ton code posté), la mise à jour ne peut pas se faire par une modification du innerHTML. Il faut impérativement passer par les fonctions DOM.
Mais là, tout dépend comment "fait" la librairie que tu utilises (JQuery ?), lorsque tu appelles

Code :

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

1
2
$('#id_ville').children('#ville').remove();
	$('#id_ville').append("<select id='ville' name='ville'><option value='-1' selected='selected'>Choisir une région</option> </select>");

A+

[camcam8782]

Bonjour!
Merci grandement pour votre aide!
Oui, le select est inclus dans un <form>. Je dois donc utiliser ces fameuses fonctions DOM. Je ne les connais pas vraiment... Pouvez vous me donner un exemple en Javascript classique (sans Jquery) de leur utilisation pour l'ajout d'un select?

Voici une version "Javascript classique" de mes fonctions java utilisée :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function go_pays(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					 alert("pays debut");
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('id_region').innerHTML = leselect;
						document.getElementById('id_ville').innerHTML="<select id='ville' name='ville'><option value='-1' selected='selected'>Choisir une région</option> </select>";
 
					}
				}
				alert("pays milieu");
				// Ici on va voir comment faire du post
				xhr.open("POST","php/ajax_pays.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('pays');
				id_pays = sel.options[sel.selectedIndex].text;
				xhr.send("pays="+id_pays);
				alert("pays fin");
			}
 
function go_region(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
				alert("region debut");
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('id_ville').innerHTML = leselect;
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","php/ajax_region.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				alert("region milieu");
 
				sel = document.getElementById('region');
 
				id_region = sel.options[sel.selectedIndex].text;
				alert("region fin");
				xhr.send("region="+id_region);
 
			}

Bien cordialement

[E.Bzz]

Pouvez vous me donner un exemple en Javascript classique (sans Jquery) de leur utilisation pour l'ajout d'un select?

Tu peux combiner l'exemple du lien que je t'ai donné dans le post précédent, et l'ajout d'options illustré dans celui-ci ...

A+

[camcam8782]

Merci, je vois maintenant comment ca marche.

Cela me pose cependant un autre probleme : Le contenu des <option> composant le <select> généré etaient issus d'une requete SQL executée par le fichier php appelé par la requete AJAX (ajax_pays.php dans mon exemple).

Or, comment est ce que je peux m'y prendre maintenant pour recuperer les valeur des <options> au moyen de javascript?? Il me semble que je dois absolument appeler un fichier php pour les recupérés via SQL mais comment est il possible d'utiliser les resultats (la liste des régions par exemple) pour "construire" mes <option>à l'aide des fonctions DOM?

Merci d'avance

Cordialement

[E.Bzz]

comment est il possible d'utiliser les resultats (la liste des régions par exemple) pour "construire" mes <option>à l'aide des fonctions DOM?

Il faut que ta page PHP renvoie une réponse structurée (à ta sauce, ou à la sauce JSON, par exemple), que tu pourras récupérer sous la forme d'un tableau (Array() ) exploitable par ta fonction JS ...

A+

[camcam8782]

Bonjour,

J'ai restructuré mon code PHP et recoder la partie javascript a l'aide des fonctions DOM. Encore une fois, cela marche très bien sous Firefox mais cela bloque toujours sous Explorer au moment de recuperer la valeur choisi dans le deuxième select créer dynamiquement ( ligne :

id_region = sel.options[sel.selectedIndex].text; voir code complet ci-dessous)

J'ai egalement essayé avec .value, meme resultat...

Y a-t-il un autre moyen de recuperer la valeur de l'option selectionné dans le <select> créé dynamiquement sous Explorer??

Merci bcp d'avance

Fichier html :

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
29
30
</form>
		</div>
		<br />
 
		<fieldset><legend> Filtrez le Wall!</legend>
		<div id="filtre">
		<div id="fac">(tous les champs sont facultatifs)</div>
		<form action="index.php" name="filtre" method="post">
		<span class="element_filtre">
		<label>Pays</label>
				<select name="pays" id="pays" >
					<option value='-1' selected="selected">Choisir un pays</option>
					<?php
                                                mysql_connect("localhost","root");
                                                mysql_select_db("mess");
                                                $res = mysql_query("SELECT * FROM pays ORDER BY id");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["pays"]."'>".$row["pays"]."</option>";
                                                }
                                        ?>
				</select>
		</span>
		<span class="element_filtre">
		<label>Region</label>
				<span id="id_region" style="display:inline">
				<select id="region" name="region" >
					<option value='-1' selected="selected">Choisir un pays</option>
				</select>
				</span>
		</span>

Code javascript :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
$(function() {
	
	$('select#pays').change(function(){go_pays();});
	
	});

function go_pays() {
	
	var divParent = document.getElementById('id_region');
    //$(divParent).children('#region').remove();
	while (divParent.firstChild) {
	divParent.removeChild(divParent.firstChild);
	}
	var nouveauSelect = document.createElement('select');
	
	nouveauSelect.id = 'region';
	nouveauSelect.name = 'region';
	
	//if(document.all) nouveauSelect.onchange="go_region()";
	//else nouveauSelect.setAttribute("onChange","go_region()");
	
	divParent.appendChild(nouveauSelect);
	
	sel = document.getElementById('pays');
	id_pays = sel.options[sel.selectedIndex].value;
	
	$.ajax({
            type: 'post',
            url: 'php/ajax_pays.php',
            data: 'pays=' + id_pays,

            success: function(results) {
				
				var name = $.evalJSON(results);
				
				var data = new Array();
				var j=0;
				while(typeof(name[j]) != "undefined"){
					data[name[j]] = name[j];
					j++;
				}
				//ajout des options au select 'region'
				var monSelect = document.getElementById('region');
				monSelect.options.length = 0;
				var selected;
				
				var i=0;
				for (var key in data) {
				
					monSelect.options[monSelect.length] = new Option(data[key],key);
					}
				$('select#region').change(function(){go_region();});
				$(monSelect).trigger("update");
            }
		}); // end ajax
	$('#id_ville').children('#ville').remove();
	$('#id_ville').append("<select id='ville' name='ville'><option value='-1' selected='selected'>Choisir une région</option> </select>");
	
}

function go_region() {
	alert('debut');
	var divParent = $('#id_ville');
    $(divParent).children('#ville').remove();
	
	sel = document.getElementById('region');
	id_region = sel.options[sel.selectedIndex].text;
	alert(id_region);
	
	$.ajax({
            type: 'post',
            url: 'php/ajax_region.php',
            data: 'region=' + id_region,

            success: function(results) {
                $(divParent).html(results);
				//$('#region').change(function(){go_region()});
				$(divParent).trigger("update");

            }
		}); // end ajax
	$('#id_lieu').children('#lieu').remove();
	$('#id_lieu').append("<select id='lieu' name='lieu'><option value='-1' selected='selected'>Choisir une ville</option> </select>");
	
}