Как я могу заполнить текстовые поля на странице, выбрав комбинированный выбор по dyanmicaly?

Question

Предположим, в базе данных есть одна таблица (например, student records) с несколькими столбцами, но моя HTML-страница отображает только несколько из них.Например: таблица, имеющая столбцы sno, sname, addr, age, dept и dob и моя страница, имеющая только 3 поля: sno, sname, dept.Здесь я отображаю поле dept в элементе управления поля со списком, а остальные поля являются текстовыми и пустыми значениями.

Мое требование таково: когда я выбираю команду dept from combobox, соответствующие строки отображаются как snoи sname должны автоматически отображаться в текстовых полях.Как я могу это сделать?

Answer 1

Когда вы меняете отдел, вы совершаете ajax-вызов на свой сервер. Ваш сервер возвращает ваш объект как JSON. Ваш обработчик успеха в вашем вызове ajax берет необходимые поля из вашего объекта JSON и устанавливает соответствующие HTML-элементы в эти поля. Например, если вы используете jQuery:

var myUrl = "http://some.domain/action/";

var success = function(response) {
  $('#textField1').val(response.sno);
  $('#textField2').val(response.sname);
}

$('#myDropDown').change(function() {
  $.get(myUrl + $(this).val(), success);
});

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

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

var map = {};

var success = function(response) {
  for (obj in response.objects) {
    map[obj.department] = { sno: obj.sno, sname: obj.sname };
  }
}

$.get(myUrl, success);

$('#myDropDown').change(function() {
  var obj = map[$(this).val()];
  $('#textField1').val(obj.sno);
  $('#textField2').val(obj.sname);
}

Надеюсь, это поможет.