Select Interactifs en Javascript

**fwe34000** · 09/08/2014, 12h04

Bonjour à tous,

Je cherche à faire des select interactif en Javascript avec des appels en BDD:

Le select 1 représente les constructeurs de mes motos: (ex: APRILIA, BMW, DUCATI)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<select name="constructeur_moto_nom">
<?php
        //Select Constructeur moto
        $constructeur = 'SELECT constructeur_moto_id,constructeur_moto_nom FROM a_constructeur_moto ORDER BY constructeur_moto_nom';
        $constructeur_query = mysql_query($constructeur) or die( 'Erreur' );
                echo '<option>Constructeur Moto</option>';
                while ( $constructeur_list = mysql_fetch_array( $constructeur_query ) ) {
                        echo '<option value="'.$constructeur_list['constructeur_moto_id'].'">'.$constructeur_list['constructeur_moto_nom'].'</option>';
        }
?>
</select>

Ça c'est bon ça marche

Si je sélectionne le constructer APRILIA, je voudrais que dans mon 2ème select apparaissent tous les modèles de moto du constructeur sélectionné que j'ai en BDD (Si je choisi APRILIA dans le select1 alors le select 2 propose: Modele1APRILIA, Modele2APRILIA, Modele3APRILIA):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<select name="modele_moto_nom">
<?php
	//Select Modèle moto
	$modele = 'SELECT modele_moto_id,modele_moto_nom FROM a_modele_moto WHERE modele_constructeur_moto_nom="constructeur_moto_id SELECTIONNE" ORDER BY modele_moto_nom';
	$modele_query = mysql_query($modele) or die( 'Erreur' );
		echo '<option>Modele Moto</option>';
		while ( $modele_list = mysql_fetch_array( $query ) ) {
			echo '<option value="'.$modele_list['modele_moto_id'].'">'.$modele_list['modele_moto_nom'].'</option>';
	}
?>
</select>

Je ne sais pas comment récupérer la valeur séléctionné dans le select1 pour la mettre dans le WHERE de la seconde requête ( WHERE modele_constructeur_moto_nom="constructeur_moto_id SELECTIONNE") et que ça prenne effet à chaque fois que je sélectionne un nouveau constructeur.

Voila si vous pouvez m'aider!

Fwe!

**SylvainPV** · 09/08/2014, 12h10

Tuto en post-it juste au-dessus... http://www.developpez.net/forums/d59...s-liees-entre/

**fwe34000** · 09/08/2014, 12h37

Salut!
Sur le lien que tu m'a donné j'ai deja pris cette exemple: http://siddh.developpez.com/articles/ajax/#LIV-A

J'ai créé mes tables:

Code sql :

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
CREATE TABLE `a_constructeur_moto` (
`constructeur_moto_id` int unsigned NOT NULL auto_increment primary key,
`constructeur_moto_nom` VARCHAR (200) NOT NULL unique,
`constructeur_important` int NOT NULL,
`constructeur_moto_image_url` text NOT NULL,
`constructeur_moto_descriptif` text NOT NULL
)
 
CREATE TABLE `a_modele_moto` (
`modele_moto_id` int unsigned NOT NULL auto_increment primary key,
`modele_moto_nom` VARCHAR (200) NOT NULL,
`modele_moto_annee` int NOT NULL,
`modele_constructeur_moto_nom` VARCHAR (200) NOT NULL,
`modele_constructeur_moto_id` int NOT NULL,
`modele_moto_image_url` text NOT NULL,
`modele_moto_descriptif` text NOT NULL
)

Ensuite je créé ma page moto.php:

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
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
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('a_modele_moto').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxModele.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('a_constructeur_moto');
	modele_constructeur_moto_id = sel.options[sel.selectedIndex].value;
	xhr.send("modele_constructeur_moto_id="+modele_constructeur_moto_id);
}
<form>
	<label>Constructeur Moto</label>
	<select name='a_constructeur_moto' id='a_constructeur_moto' onchange='go()'>
		<option value='-1'>Choisissez un Constructeur</option>
<?
$res = mysql_query("SELECT * FROM a_constructeur_moto ORDER BY constructeur_moto_nom");
while($row = mysql_fetch_assoc($res)){
	echo "<option value='".$row["constructeur_moto_id"]."'>".$row["constructeur_moto_nom"]."</option>";
}
?>
	</select>
	<label>Modele Moto</label>
	<div id='a_modele_moto' style='display:inline'>
		<select name='a_modele_moto'>
			<option value='-1'>Choisissez un Constructeur</option>
		</select>
	</div>
	</fieldset>
</form>

Puis la page de traitement selon la sélection (ajaxModele.php):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
echo $_POST["modele_constructeur_moto_id"];
echo "<select name='a_modele_moto'>";
if(isset($_POST["modele_constructeur_moto_id"])){
        $res = mysql_query("SELECT * FROM a_modele_moto WHERE modele_constructeur_moto_id=".$_POST["modele_constructeur_moto_id"]." ORDER BY modele_moto_nom");
        while($row = mysql_fetch_assoc($res)){
                echo "<option value='".$row["modele_moto_id"]."'>".$row["modele_moto_nom"]."</option>";
        }
}
echo "</select>";
?>

Le premier select (constructeur moto) marche bien. Il affiche dans une liste toutes les marques de moto que j'ai en BDD.
Si je choisi une marque (mettons DUCATI), son ID apparait bien au-dessus du second select (la première ligne de code que j'ai mis dans ajaxModele.php ( echo $_POST["modele_constructeur_moto_id"]; ) permet de vérifier ça.
Par contre ça n'affiche pas les modèles de Moto qui font partis de ce constructeur dans le second select!

J'ai fais pleins de test avant de revenir ici mais je ne comprends pas pourquoi ça ne marche pas!

Fwe!

**fwe34000** · 09/08/2014, 15h28

D'ailleurs je viens de mettre en pratique cette exemple la:
http://siddh.developpez.com/articles/ajax/#LIV-A

Et lorsque je sélectionne un auteur alors le premier select n'a aucune influence sur le second select.

Donc je pense que le code n'est pas bon et c'est pour ça que ça n'a pas marché quand j'ai mis en pratique sur mon cas.