Ajax-подход к заполнению второго динамического раскрывающегося списка на основе выбора в первом

Question

Я не использовал Ajax раньше, и это кажется простым. У меня есть отдельные части головоломки, но я не уверен, как их собрать.

Оба раскрывающихся списка заполняются из базы данных, первый заполняется с использованием следующего кода:

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

Второй выпадающий список должен быть заполнен на основе значения, выбранного выше. Поэтому я хочу взять идентификатор выбранного элемента, а затем использовать его в запросе для заполнения второго раскрывающегося списка.

Я бы использовал приведенный выше код, но со следующим для SQL-запроса:

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

Где X - идентификатор selectedIndex в первом раскрывающемся списке.

Хотя код работает, я не знаю, как их объединить. Я мог бы использовать Javascript для изменения InnerHTML элемента div, называемого «сезоны», распечатав код для извлечения и отображения выпадающих списков.

Но есть ли лучший способ, чтобы я мог видеть оба выпадающих списка, но второй отключен, пока первый не будет завершен?

Answer 1

Ваш PHP-скрипт, заполняющий второй список, должен вызываться через Ajax, когда пользователь изменяет значение первого выпадающего списка.Поэтому вы должны добавить onchange = "myFunctionToPopulate (this.value);"до первого раскрывающегося списка.

Если вы не знаете, как это сделать, я бы посоветовал вам также использовать библиотеку JS, такую ​​как jQuery, и мы опубликуем вам простой код для достижения этой цели.

Отредактировано

С помощью jQuery вы можете сделать что-то вроде этого:

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

Где your_script.php вернет весь тег выбора.

Answer 2

Вы можете использовать заполнение innerHTML вашего <select> поля вместо <div>, но я бы действительно посоветовал вам взглянуть на jQuery: http://api.jquery.com/category/ajax/. Это делает все намного проще.