Как я могу заполнить каскадный выпадающий список при получении данных из AJAX?

Question

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

Я попытался поместить заполнение второго выпадающего списка, когда код готов, но не работает.

HTML:

  <div class="form-group">
    <label class="control-label">Commessa:</label>
    <select id="joborders" class="form-control"></select>
  </div>
  <div class="form-group">
    <label class="control-label">Analizzatore:</label>
    <select id="analyzers" class="form-control"></select>
    <input type="hidden" id="analyzerId" />
  </div>
  <div class="form-group">
    <label class="control-label">Tipo di manutenzione:</label>
    <select id="maintenancetypes" class="form-control"></select>
  </div>

JQuery:

$(document).ready(function () {

  $('#joborders').change(function () {
    populateAnalyzers();
  })

});

function populateAnalyzers() {

  var obj = {
    joborderId: $('#joborders option:selected').val()
  };

  $.ajax({
    url: "plannedControl.asmx/GetAnalyzers",
    type: "POST",
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    data: JSON.stringify(obj),
    success: function (result) {
    var s = '<option value="0">Selezionare un\'analizzatore...</option>';
    var data = result.d;
    for (var i = 0; i < data.length; i++) {
     s += '<option value="' + data[i].Value + '">' + data[i].Text + '</option>';
    }
    $("#analyzers").html(s);
    },
    error: function (errormessage) {
      alert(errormessage.responseText);
    }
  });
}

JQuery, который извлекает данные в режиме редактирования:

function getPlannedModel(id) {

  var obj = { id: id };

  $.ajax({
    url: "plannedControl.asmx/GetPlannedModel",
    type: "POST",
    data: JSON.stringify(obj),
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
    data = result.d;

    $('#joborders').val(data.JobOrderId).change;
    $('#analyzerId').val(data.AnalyzerId);
    $('#maintenancetypes').val(data.MaintenanceTypeId).change;

    $('#myModalLabel').html('Modifica modello di pianificazione');
    $('#modalEditor').modal('show');
  },
    error: function (errormessage) {
    alert(errormessage.responseText);
    }
  }).done(function () {

    populateAnalyzers();
    $('#analyzers').val($('#analyzerId').val()).change;

 });
}

Answer 1

Как описано в этого ответа , вы должны использовать .trigger("chosen:updated");, чтобы обновить параметры раскрывающегося списка после добавления / изменения. Вы также должны использовать .append(yourNewOptionHere); для обновления. Если вы хотите очистить список раньше, обязательно позвоните .empty();

Пример:

$('#analyzers').empty();
var newOption = $('<option value="1">get your options here using ajax</option>');
$('#analyzers').append(newOption);
$('#analyzers').trigger("chosen:updated");