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");