c# - 从ajax检索数据时如何填充级联下拉列表？

Question

我尝试开发一个 CRUD 网页，其中有两个级联下拉列表。当我输入要保存的数据时，一切正常，但当我检索数据时，第二个 dropdownlist 仍为空。

我尝试在代码完成后将人口放入第二个下拉列表中，但不起作用。

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

如 this answer 中所述，您必须使用 .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");