[AJAX] liste deroulante liée ajax dur dur
bonjour,
voila j'ai alimenter une liste deroulante avec des categorie et ses ous_categorie dont voici le code:
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
| <?php
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "idealeparut";
$connexion = mysql_connect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
// On récupère tous les articles, triés par catégorie, titre, référence.
$req = 'SELECT c.nom_categorie,s.nom_sous_categorie
FROM categorie_annonce as c, sous_categorie_annonce as s
where s.num_categorie=c.id_categorie
';
$res = mysql_query($req) or exit('Erreur: '.mysql_error());
$num_categorie = null;
echo('<select name="categorie">');
while ($donnees = mysql_fetch_assoc($res)) {
// Si on change de catégorie, on l'affiche dans le <select>.
if ($donnees['nom_categorie'] !== $num_categorie) {
$num_categorie = $donnees['nom_categorie'];
echo('<optgroup label="'.$num_categorie.'">');
}
//On ajoute "logiquement" notre <option>.
echo('<option value="'.$donnees['num_categorie'].'">'.$donnees['nom_sous_categorie'].'</option>');
}
echo('</select>');
?> |
ce code fonctionne nikel.
mais je veut que quand on choisi une sous-catégorie de cette liste sa sous-sous-catégorie apparait dans une liste déroulante en dessous.
voila ce que j ai trouver:
page 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
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
|
<?php
$db = array(
'server' => 'localhost',
'user' => 'root',
'passwd' => '',
'name' => 'idealeparut'
);
$mysqli = new mysqli($db['server'], $db['user'], $db['passwd'], $db['name']);
if (0 !== mysqli_connect_errno()) {
exit('Could not connect to database: ' . mysqli_connect_error());
}
// categorie initiales
$sql = 'SELECT c.nom_categorie,s.nom_sous_categorie
FROM categorie_annonce as c, sous_categorie_annonce as s
where s.num_categorie=c.id_categorie';
?>
<script type="text/javascript" src="categorie.js"></script>
<form action="submit.php" method="post" id="form">
<p>Sélectionnez une categorie:
<select name="categorie" id="categorie" onchange="updateDepartements(this.value)">
<?php
if (FALSE !== ($res = $mysqli->query($sql)or exit('Erreur: '.mysql_error()))) {
$num_categorie = null;
echo('<select name="categorie">');
while ($donnees = mysql_fetch_assoc($res)) {
// Si on change de catégorie, on l'affiche dans le <select>.
if ($donnees['nom_categorie'] !== $num_categorie) {
$num_categorie = $donnees['nom_categorie'];
echo('<optgroup label="'.$num_categorie.'">');
}
//On ajoute "logiquement" notre <option>.
printf('<option value="%s">%s</option>', $row['num_categorie'], $row['nom_sous_categorie']);
}
$res->close();
}
?>
</select>
</p>
<p>Sélectionnez une sous_categorie:
<select name="categorie" id="categorie" onchange="updatesousCategorie(this.value)">
<?php
if (FALSE !== ($res = $mysqli->query($sql))) {
while ($row = $res->fetch_assoc()) {
printf('<option value="%s">%s</option>', $row['id_categorie'], $row['nom_categorie']);
}
$res->close();
}
?>
<p>Sélectionnez une sous-categorie:
<select name="sous_categorie" id="sous_categorie"></select>
</p>
<p><input type="submit" value="Soumettre" />
</form> |
page categorie.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| var ajax;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
if (typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
}
}
function updatesousCategorie(categorie) {
ajax.open('get', 'rpc.php?categorie=' + categorie);
ajax.onreadystatechange = handleResponse;
ajax.send(null);
}
function handleResponse() {
if(ajax.readyState == 4) {
var data = ajax.responseXML.getElementsByTagName('sous_categorie');
document.getElementById('sous_categorie').innerHTML = '';
for(var i=0;i<data.length;i++) {
var option = document.createElement('option');
option.setAttribute('value',data[i].getAttribute("id"));
option.appendChild(document.createTextNode(data[i].firstChild.nodeValue));
document.getElementById('sous_categorie').appendChild(option);
}
}
}
function initForm() {
document.getElementById('categorie').selectedIndex = 0;
updatesousCategorie(document.getElementById('categorie').value);
}
if (window.addEventListener) {
window.addEventListener("load", initForm, false);
} else if (window.attachEvent){
window.attachEvent("onload", initForm);
} |
rpc.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
37
| <?php
if (TRUE === isset($_GET['categorie'])) {
$categorie = intval($_GET['categorie']);
} else {
exit;
}
require './config.inc.php';
$mysqli = new mysqli($db['server'], $db['root'], $db['passwd'], $db['name']);
if (0 !== mysqli_connect_errno()) {
exit('Could not connect to database: ' . mysqli_connect_error());
}
header('Content-Type: text/xml; charset=UTF-8');
$dom = new DOMDocument('1.0', 'utf-8');
$message = $dom->createElement('message');
$message = $dom->appendChild($message);
$sql = 'SELECT ref_sous_sous_categorie,libelle_sous_categorie ' .
'FROM sous_sous_categorie ' .
'WHERE num_sous_categorie=' . $categorie;
if (FALSE !== ($res = $mysqli->query($sql))) {
while ($row = $res->fetch_assoc()) {
$souscategorie = $dom->createElement('souscategorie', utf8_encode($row['libelle_sous_catgeorie']));
$souscategorie = $message->appendChild($souscategorie);
$souscategorie->setAttribute('id', $row['ref_sous_sous_categorie']);
}
$res->close();
}
echo $dom->saveXML();
?> |
