时间戳

首页 > 解决方案 > 从 ajax 检索数据时如何填充级联下拉列表？

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

问题描述

我试图开发一个 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>

查询：

$(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;

 });
}

标签： c#jqueryajaxdropdown

解决方案

如本答案中所述，您必须.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");

推荐阅读