База данных Ajax для запроса с выпадающим списком - PullRequest
Новая
       11

База данных Ajax для запроса с выпадающим списком

0 голосов
/ 17 февраля 2012

Раскрывающийся список для запроса от другого php, но с использованием 2 раскрывающегося списка для его поиска.

Если выбран возраст (41), то пользователь нажимает на выпадающий список фамилий, пользователь может выбрать только Питера Гриффина и Глен Куагмир в выпадающем списке фамилий. И будут показаны данные Питера Гриффина и Глена Куагмайра.

1 Ответ

1 голос
/ 17 февраля 2012

Если я вас правильно понял, вы хотите, чтобы содержимое полей выбора динамически изменялось в зависимости от выбора пользователя в противоположном окне.

Мой способ сделать это - привязать обработчики событий jQuery $ (). Change () к каждому полю выбора. Когда пользователь меняет поле выбора, событие запускается, и ваш код должен затем выполнить запрос AJAX GET, снова используя jQuery ($ .get ()) для вашего бэкэнда, возможно, PHP-скрипт, который выполняет фильтрацию и возвращает в качестве JSON опции для второго выпадающего списка.

РЕДАКТИРОВАТЬ: Пример ниже. $ .Get вызывает внутренний php-скрипт, который возвращает JSON, использованный для заполнения другого поля выбора. 

<select id="lastname"><option value="Will">Will</option><option value="John">John</option></select>
<select id="age"><option value="45">45</option><option value="41">41</option></select>

$("#lastname").change(function() {
      var value = $(this).val();
      $.get('backend.php?n=' + value, function(data) {
           $("#age").empty();
           $.each(data, function() {
               $("#age").append("<option value='" + this.value+ "'>" + this.content + "</option");
           });
      }, "json");
});

$("#age").change(function() {
      var value = $(this).val();
      $.get('backend.php?a=' + value, function(data) {
           $("#lastname").empty();
           $.each(data, function() {
               $("#lastname").append("<option value='" + this.value+ "'>" + this.content + "</option");
           });
      }, "json");
});
...