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

如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");

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

1 个答案: