[AJAX] Listes déroulantes liées
Salut !
J'ai un soucis. J'aimerais mettre en place des listes déroulantes liées. J'ai 3 fichiers : index.php contenant les listes déroulantes, Func.js contenant la fonction et liste.php contenant le code php.
La première liste déroulante se charge normalement mais la seconde ne réagit pas en fonction de cette dernière. De plus, j'aimerais pouvoir répéter ce système dans ma page pour d'autres données.
index.php
Code:
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
|
<html>
<head>
<SCRIPT type="text/javascript" src="Func.js"></script>
</head>
<body>
<div class="Centered">
<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
<fieldset>
<legend>Choix</legend>
<div class="Left">
Département :
<select name="list1" id="list1" class="ButtonL" onchange="request05(this.form)">
<option value="" selected="selected">Choix</option>
<?php
require 'Connect.php';
mysql_connect(SERVER, NAME, PASSWD) or die('Erreur SQL lors de la tentative de connexion à la base. Détails : '.mysql_error());
mysql_select_db(BASE) or die('Erreur SQL lors de la sélection de la base. Détails : '.mysql_error());
$listDep = mysql_query("SELECT DISTINCT Dep_Com FROM commune ORDER BY Dep_Com;")
or die('Erreur SQL lors de la récupération des départements. Détails : '.mysql_error());
while ($data = mysql_fetch_assoc($listDep))
{
echo "<option value".$data['Dep_Com'].">".$data['Dep_Com']."</option>";
}
?>
</select>
<select name="list2" id="list2" class="ButtonL">
</select>
</div>
</fieldset>
</form>
</div>
</body>
</html> |
Func.js
Code:
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
|
var l1 = f.elements["list1"];
var l2 = f.elements["list2"];
var index = l1.selectedIndex;
if(index < 1)
l2.options.length = 0;
else {
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", "liste.php", true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4)
eval(xhr_object.responseText);
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "departement="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
xhr_object.send(data);
} |
liste.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
header('Content-type: text/html; charset=iso-8859-1');
// Déclaration des fichiers à utiliser
require 'Connect.php';
// On se connecte à la de données
mysql_connect(SERVER, NAME, PASSWD) or die('Erreur SQL lors de la tentative de connexion à la base. Détails : '.mysql_error());
mysql_select_db(BASE) or die('Erreur SQL lors de la sélection de la base. Détails : '.mysql_error());
$query = "SELECT DISTINCT Cp_Com FROM commune WHERE Dep_Com = '".$_POST["departement"]."'";
$query .= " ORDER BY Cp_Com;";
$result = @mysql_query($query);
echo 'var o = null;';
echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
echo 's.options.length = 0;';
while($r = mysql_fetch_array($result))
echo 's.options[s.options.length] = new Option("'.$r["departement"].'");';
@mysql_close($mysql_db);
?> |
Quelqu'un peut m'aider svp ? Ce serait sympa car c'est très urgent !
Merci d'avance...
