У меня есть два выпадающих списка бок о бок. Когда пользователь выбирает из первого списка, мне нужны параметры второго списка, которые будут отображаться.
Подпараметры будут извлекаться из базы данных. У меня есть страница, которая вернет необходимый 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> caveat: can not использовать форму, потому что выбор является частью другой формы.
Обычный способ сделать это – выполнить запрос AJAX после того, как выбрано первое раскрывающееся меню, чтобы получить содержимое второго.
Именно то, как вы это сделаете, будет зависеть от используемых вами фреймворков / библиотек, но вот пример разработанного для него плагина jQuery:
Каскадный плагин jQuery
На SO также есть ряд связанных вопросов, которые могут помочь:
Используйте событие onchange для выбора для вызова функции ajax для извлечения новых данных
Самый простой способ – настроить ваш скрипт для вывода всей разметки сгенерированного списка выбора и вставить его в элемент оболочки, например:
<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 });