[AJAX] Liste SELECT influant le contenu d'un autre SELECT via SQL

**david5786** · 29/10/2013, 11h43

Bonjour,

je reprends le sujet "Résolu": http://www.developpez.net/forums/d17...listes-chaine/

Mon formulaire sélectionne dans un 1er temps un Pays (id = country), qui va influencer donc les régions dans le SELECT (liste) suivant, Régions (id = region) et ainsi de suite...

Voici mon code:

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
var xhr = null; 
function getXhr(){
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
	getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// 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('region').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxregion.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('country');
	idcountry = sel.options[sel.selectedIndex].value;
	xhr.send("idcountry="+idcountry);
}
function goreg(){
	getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// 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('department').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxdepartment.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('region');
	idesp = sel.options[sel.selectedIndex].value;
	xhr.send("idregion="+idregion);
}

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
<TR>
	<TD><font face="Verdana" size="2">Country:</font></TD>
	<TD>
		<select name='country' id='country' onchange='go()'>
			<option value='-1'>Choose a country</option>
<?PHP
$res = mysql_query("SELECT idcountry, country, idcontinent FROM gd_loccountries ORDER BY country ASC");
while($row = mysql_fetch_assoc($res)){
	echo "<option value='".$row["idcountry"]."'>".$row["country"]."</option>";
}
>
		</select>
	</TD>
</TR>
<TR>
	<TD><font face="Verdana" size="2">County / Region:</font></TD>
	<TD>
		<div id='regions' style='display:inline'>
			<select name='region' id='region'>
				<option value='-1'>Choose a region</option>
			</select>
		</div>
	</TD>
</TR>

voilà le ajaxregion.php:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
echo "<select name='region'  id='region' onchange='godep()'>";
if(isset($_REQUEST["idcountry"])){
	$res = mysql_query("SELECT idregion, region, idcountry FROM gd_locregions WHERE idcountry=".$_REQUEST["idcountry"]." ORDER BY region ASC");
	while($row = mysql_fetch_assoc($res)){
		echo "<option value='".$row["idregion"]."'>".$row["region"]."</option>";
	}
}
else
	echo "<option value='-1'>Choose the region</option>";
echo "</select>";
?>

et le ajaxdepartment.php:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
echo "<select name='department'  id='department''>";
if(isset($_REQUEST["idregion"])){
	$res = mysql_query("SELECT iddepartment, department, idregion FROM gd_locdepartment WHERE idregion=".$_REQUEST["idregion"]." ORDER BY department ASC");
	while($row = mysql_fetch_assoc($res)){
		echo "<option value='".$row["iddepartment"]."'>".$row["department"]."</option>";
	}
}
else
	echo "<option value='-1'>Choose the department</option>";
echo "</select>";
?>

Le SELECT Pays fonctionne correctement, il va chercher bêtement via la requête les pays, jusque là tout va bien...
Seulement, lorsque j'en choisis un, le SELECT Region se vide, il n'y a même plus l'option "Choose..."

Remarque, les requêtes utilisées ont été testées individuellement et elle retourne un résultat et fonctionne correctement.

D'où vient le problème ? entre la chaise et le clavier ?

Merci d'avance pour votre aide.

**andry.aime** · 29/10/2013, 11h52

Bonjour,

1-

Code :

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

document.getElementById('region').innerHTML = leselect;

C'est l'innerHTML du div que tu dois modifier, pas celui du select.

Code :

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

document.getElementById('regions').innerHTML = leselect;

2-

Code :

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

1
2
idesp = sel.options[sel.selectedIndex].value;
				xhr.send("idregion="+idregion);

Code :

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

1
2
idesp = sel.options[sel.selectedIndex].value;
				xhr.send("idregion="+idesp);

A+.

**david5786** · 29/10/2013, 13h07

j'ai modifié comme suit mais ça ne fonctionne toujours pas

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
var xhr = null; 
function getXhr(){
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
	getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// 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('regions').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxregion.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('country');
	idco = sel.options[sel.selectedIndex].value;
	xhr.send("idcountry="+idco);
}
function goreg(){
	getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// 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('departments').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxdepartment.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('region');
	idreg = sel.options[sel.selectedIndex].value;
	xhr.send("idregion="+idreg);
}

**andry.aime** · 29/10/2013, 13h13

Code :

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

function goreg(){

Code :

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

echo "<select name='region'  id='region' onchange='godep()'>";

A+.

**david5786** · 29/10/2013, 13h20

quel est le problème là ?

le onchange appelle une autre fonction que goreg

**andry.aime** · 29/10/2013, 13h34

Tu ne vois pas la différence?
La 2ème fonction javascript que tu as est goreg() or que ton select appelle une fonction inexistante godep().

A+.

[AJAX] Liste SELECT influant le contenu d'un autre SELECT via SQL

AJAX

Vue hybride

Discussions similaires

Partager

Partager