Ajaxowe podejście do zapełniania drugiego dynamicznego menu rozwijanego na podstawie wyboru w pierwszym - php, javascript, mysql, ajax

Nie używałem wcześniej dużo Ajaksu, a to wydaje się proste: mam oddzielne części układanki, ale nie jestem pewien, jak je połączyć.

Obydwa listy rozwijane są wypełniane z bazy danych, pierwsza jest wypełniana za pomocą następującego kodu:

<?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>

Drugie menu powinno zostać wypełnione na podstawie wartości wybranej powyżej. Więc zasadniczo chcę wziąć identyfikator wybranego elementu, a następnie użyć go w zapytaniu, aby wypełnić drugie menu.

Użyłbym powyższego kodu, ale z następującym dla zapytania SQL:

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

Gdzie X jest id wybranego selectedIndex na pierwszym liście rozwijanej.

Chociaż kod jest już gotowy do pracy, nie wiemjak połączyć dwa. Mógłbym użyć JavaScript do modyfikacji InnerHTML elementu div o nazwie "sezony", drukując kod, aby pobrać i wyświetlić listy rozwijane.

Ale czy istnieje lepszy sposób, w którym mogę wyświetlić oba menu, ale drugi jest wyłączony, dopóki pierwszy nie zostanie ukończony?

Odpowiedzi:

Twój skrypt PHP wypełniający drugą listę powinienbyć wywołanym przez Ajax, gdy użytkownik zmienia wartość pierwszego menu rozwijanego. Więc powinieneś dodać onchange = "myFunctionToPopulate (this.value);" do pierwszego menu rozwijanego.

Jeśli nie wiesz, jak to zrobić, sugeruję użycie biblioteki JS, takiej jak jQuery, a my wyślemy ci prosty kod, aby to osiągnąć.

Edytowane

Z jQuery możesz zrobić coś takiego:

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

Gdzie your_script.php zwróci cały znacznik select.

możesz użyć wypełnij innerHTML Twojego <select> pole zamiast <div>, ale naprawdę radzę, aby rzucić okiem na jQuery: http://api.jquery.com/category/ajax/. To wszystko ułatwia.