Выпадающий список, где параметры заполняют второй список js / php?

Question

У меня есть 2 выпадающих списка рядом. Когда пользователь выбирает из первого списка, мне нужно отобразить параметры второго списка.

Подопции будут извлечены из базы данных. У меня есть страница, которая будет возвращать необходимый HTML с учетом конкретного родителя. Мне просто нужно выбрать первый список, чтобы вызвать обновление списка № 2.

Каков наилучший способ сделать это?

<select id="parent" name="list1">
    <option value="1">Parent 1</option>
    <option value="2">Parent 2</option>
    <option value="3">Parent 3</option>
    <option value="4">Parent 4</option>
</select>

<select id="child" name="list2">
</select>

предостережение: нельзя использовать форму, потому что выделение является частью другой формы.

Answer 1

Обычный способ сделать это - выполнить AJAX-запрос после выбора первого раскрывающегося списка для получения содержимого второго.

То, как вы это сделаете, будет зависеть от используемых вами фреймворков / библиотек, но вот пример плагина jQuery, предназначенного для него:

jQuery каскадный плагин

Есть также ряд связанных вопросов по SO, которые могут помочь:

https://stackoverflow.com/search?q=cascading+dropdown

Answer 2

Используйте событие onchange of select для вызова функции ajax для получения новых данных

Answer 3

Простой простой способ - настроить скрипт для вывода всей разметки сгенерированного списка выбора и вставить ее в элемент-обертку, например ::

<div id="wrapper">
    <select id="child" name="list2">
    </select>
</div>

$("#parent').change(function() {
    $('#wrapper').load('getSelect.php','selection=' + $(this).val());
    return false; // may or may not be needed
});