Approche Ajax pour remplir une deuxième liste déroulante dynamique basée sur la sélection dans le premier - php, javascript, mysql, ajax

Je n'ai pas beaucoup utilisé Ajax auparavant, et cela semble simple. J'ai les pièces séparées du puzzle, mais je ne sais pas comment les assembler.

Les deux listes déroulantes sont renseignées à partir de la base de données. La première est renseignée à l'aide du code suivant:

<?php
$sql = "SELECT title, nid FROM node where type= "hotel"";
$hotels = mysql_query($sql);
?>
<select name="hotels" id="hotels">
<?php
while($row = mysql_fetch_array($hotels))
{
echo "<option value="".$row["nid"]."">".$row["title"]."n  ";
}
?>
</select>

La deuxième liste déroulante doit être renseignée en fonction de la valeur sélectionnée ci-dessus. Donc, fondamentalement, je veux prendre l'identifiant de l'élément sélectionné, puis l'utiliser dans une requête pour remplir le deuxième menu déroulant.

Je voudrais utiliser le code ci-dessus, mais avec ce qui suit pour la requête SQL:

SELECT title, nid from node where type = "season" AND hotel_nid = X

Où X est l'identifiant de selectedIndex dans le premier menu déroulant.

Bien que le code soit là pour travailler, je ne sais pascomment combiner les deux. Je pourrais utiliser Javascript pour modifier le InnerHTML d'une div appelée "saisons" en imprimant le code pour récupérer et afficher les listes déroulantes.

Mais existe-t-il un meilleur moyen de rendre les deux listes déroulantes visibles, mais la seconde est désactivée jusqu'à la fin de la première?

Réponses:

Votre script PHP remplissant la deuxième liste devraitêtre appelé via Ajax lorsque l'utilisateur modifie la valeur du premier menu déroulant. Donc, vous devriez ajouter onchange = "myFunctionToPopulate (this.value);" à la première liste déroulante.

Si vous ne savez pas comment faire cela, je vous suggère également d'utiliser une bibliothèque JS telle que jQuery, et nous vous ferons parvenir le code simple pour y parvenir.

Édité

Avec jQuery, vous pouvez faire quelque chose comme ceci:

<select name="first_dropdown" onchange="$("#dropdown2_container").load("your_script.php?nid="+this.value);">
<option....
</select>
...
<div id="dropdown2_container" style="display:none"> </div>

Où your_script.php renverrait la balise select entière.

vous pourriez utiliser remplir le innerHTML de votre <select> boîte au lieu d'un <div>, mais je vous conseillerais vraiment de jeter un coup d’œil sur jQuery: http://api.jquery.com/category/ajax/. Cela facilite beaucoup les choses.