liaison entre deux liste deroulante(pays,ville) en ajax

**Miss kouka** · 19/05/2010, 18h21

Bonjour,

j'ai deux liste deroulante(pays,ville) je veux quand je selectione dans la premiere liste(pays:maroc) la deusieme liste s'affiche seulement les villes du maroc voila mon code mais m'affiche pas les villes:

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
86
87
88
89
<html>
<head>
<title></title>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
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;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = 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('pays').innerHTML =
leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.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('id_ville');
id_pays = sel.options[sel.selectedIndex].value;
xhr.send("id_ville="+id_ville);
}
</script>
</head>
<body>
<form><fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>pays</label>
<select name='id_pays'  onChange='go()'>
  <option value='-1'>Aucun</option>
  <?
mysql_connect("localhost","root","");
mysql_select_db("site_annonce");
$res = mysql_query("SELECT * FROM pays ");
while($row = mysql_fetch_assoc($res)){
echo "<option
value='".$row["id_pays"]."'>".$row["nom_pays"]."</option>";}
?>
</select>
<label>ville</label>
<div id='ville' style='display:inline'>
<select name='id_ville'>
<option value='-1'>Choisir une ville</option>
</select>
</div>
</fieldset>
</form>
<?
echo "<select name='id_ville'>";
if(isset($_POST["id_pays"])){
mysql_connect("localhost","root","");
mysql_select_db("site_annonce");
$res = mysql_query("SELECT id_pays,nom_ville FROM ville
WHERE id_pays=".$_POST["id_pays"]."");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_ville"]."'>".$row["nom_ville"]."</option>";
}
}
echo "</select>";
?>
</body>
</html>

n'hesitez pas de m'aider

**Madfrix** · 19/05/2010, 18h29

Bonjour,

ton id_ville

Code javascript :

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

1
2
 
xhr.send("id_ville="+id_ville);

ne correspond à rien ou je me trompe ?

Dans ce cas de figure, moi je fais la chose suivante : j'envoie en GET la valeur du id_pays à ajaxLivre.php et celui ci construit dynamiquement ma liste déroulante des villes

**Miss kouka** · 19/05/2010, 18h44

merci, ce que tu m'a dis c'est ca je crois :

sel = document.getElementById('id_pays');
id_pays = sel.options[sel.selectedIndex].value;
//xhr.send("id_ville="+id_ville);

j'ai la fait mais ca marche pas

**Madfrix** · 19/05/2010, 18h55

En fait pour un projet se rapprochant du tiens, mon ajax est le suivant :

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
18
19
20
21
22
23
24
25
26
27
28
 
// --- fonction d'affichage radio inscription
function afficheSelect(url, div){    
 
	var xhr_object = null;
 
	univers = $("#univers").val();
	galaxie = $("#galaxie").val();
	ss = $("#ss").val();
	position = $("#position").val();
 
	url += '?univers='+univers+'&galaxie='+galaxie+'&ss='+ss+'&position='+position+'&div='+div;
 
	if(window.XMLHttpRequest) 
		xhr_object = new XMLHttpRequest();
	else if (window.ActiveXObject) 
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
	xhr_object.open("GET", url, true);
	xhr_object.onreadystatechange = function(){
		if (xhr_object.readyState == 4 && xhr_object.status == 200)
			$('#'+div).html(xhr_object.responseText);
			else
			$('#'+div).html('<div style="float:left; width:70px; height:20px; margin-top:2px;"><img src="images/connexion/wait.gif" /></div>');
		}
	xhr_object.send(null);
 
}

Y'a un peu de jquery avec mais tu remplaces par du javascript pur si tu veux. Et donc mon fichier php représenté par l'argument url de ma fonction traite mon url que je lui fourni $_GET['univers'], $_GET['galaxie'] etc...puis se connecte à la base et me produit une liste déroulante associée à mes variables.

Voilà, j'espère avoir été plus clair

**andry.aime** · 20/05/2010, 07h39

Bonjour,

Code :

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

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

Code :

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

1
2
3
sel = document.getElementById('id_pays');
id_pays = sel.options[sel.selectedIndex].value;
xhr.send("id_pays="+id_pays);

Mets ce code dans un autre fichier

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
echo "<select name='id_ville'>";
if(isset($_POST["id_pays"])){
mysql_connect("localhost","root","");
mysql_select_db("site_annonce");
$res = mysql_query("SELECT id_pays,nom_ville FROM ville
WHERE id_pays=".$_POST["id_pays"]."");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_ville"]."'>".$row["nom_ville"]."</option>";
}
}
echo "</select>";
?>

Ensuite, c'est l'adresse du fichier que tu appelles ici.

Code :

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

xhr.open("POST","nouveauAdresse.php",true);

Penses à faire des indentations sur les codes, ce que tu faits n'est pas très lisible. Je te conseille de lire d'abord un tutoriel javascript avant d'aborder AJAX car visiblement tu appelles des éléments qui n'éxistent pas et plusieurs fois. Essaies de comprendre avant de faire copier/coller.

@Madfrix : pourquoi tu n'utilises pas les fonctions AJAX de jQuery au lieu de créer un XMLHttpRequest.

A+.

**Madfrix** · 20/05/2010, 10h32

C'est parce que j'ai repris un de mes anciens codes quand je n'utilisais pas encore JQuery mais c'est vrai que c'est un peu bete je te l'accorde

liaison entre deux liste deroulante(pays,ville) en ajax

Langage PHP

Discussions similaires

Partager

Partager