Динамическое заполнение выпадающего списка в PHP

Question

У меня есть небольшая страница PHP, которая содержит два выпадающих списка

Мне нужно заполнить второй в соответствии с результатом, выбранным в первом раскрывающемся списке .... это возможно? Другими словами, мне нужно использовать значение, выбранное в первом раскрывающемся списке, и использовать его в запросе дБ, используемом для заполнения второго раскрывающегося списка (но его следует заполнять при выборе первого раскрывающегося списка.

Если это возможно, какие-нибудь подсказки, пожалуйста? (можно предположить, что я могу заполнить первый выпадающий список из дБ)

спасибо

Answer 1

Вариант 1: встроить данные для второго выбора в документ в виде скрытых элементов или объектов JS. Обработчик события change при первом выборе заполнит второй выбор. У List Apart есть пример страницы динамического выбора .

Вариант 2: использовать AJAX. Когда первый выбор изменяется, сделайте запрос к серверу на содержание второго выбора, а затем заполните его. С библиотекой JS (такой как jQuery) это становится довольно просто.

$('select#one').change(
  function (evt) {
    $('select#two').load('/thing/'+this.value);
  }
);

"/ thing / " идентифицирует ваш серверный скрипт для генерации списка элементов на основе "" (используйте средства перезаписи вашего веб-сервера, чтобы разрешить путь URL к реальному скрипту) Вы могли бы просто заставить его всегда генерировать

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

$('select#one').change(
  function (evt) {
    $('select#two').load('/thing/'+this.value, {fmt: 'option'});
  }
);

Answer 2

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

Answer 3

@ outis имеет смысл использовать .change в jquery, в противном случае используйте onchange событие в select коде.

как

<select id='my_select' onchange='javascript:myfunc()'>
<option value='a'>a</option>
.
.
<option value='z'>z</option>

function myfunc(){
//write code to populate another dropdown based on selected value

}

Вы можете увидеть это Динамическое заполнение раскрывающегося списка на основе другого значения раскрывающегося списка

Answer 4

Есть два способа сделать это. Старая школа «выберите опцию и отправьте, чтобы перестроить страницу», которая работает практически повсеместно, и новомодные методы AJAX, чтобы загрузить содержимое второго выпадающего меню без обновления страницы.

Оба имеют свои преимущества / недостатки, поэтому все сводится к тому, что лучше для ваших целей. Метод oldschool вообще не требует никакого javascript, но, поскольку он выполняет обход формы через сервер, вы получите мерцание «Очистить окно и затем перерисовать страницу».

Метод AJAX позволяет обойти мерцание обновления, но также не будет работать в браузерах с отключенным JavaScript. Для обработки вызовов AJAX и заполнения выпадающего списка требуется немного больше кода на стороне клиента, но код на стороне сервера будет одинаковым для обоих методов: одни и те же запросы, одинаковые циклы поиска, просто разные выходные данные методы.

Answer 5

Вам понадобится асинхронный обратный вызов на сервер без перезагрузки страницы. (Я сомневаюсь, что вы действительно хотите иметь кнопку, которая отправляет сообщения обратно на сервер). Так что AJAX - это то, что может сделать именно это. Добавьте вызов AJAX в обработчик событий onchange вашего первого раскрывающегося списка, который отправляет выбор обратно на сервер и возвращает содержимое второго раскрывающегося списка. Когда вызов AJAX возвращает новые значения, вы будете использовать его для создания контента для второго выпадающего списка. Конечно, большая часть этого делается в Javascript, кроме фактической серверной части, которая останется в PHP.