当 Ajax 调用中的下拉列表更改时 ListboxFor 不绑定

Question

当用户更改特定下拉列表时，我正在尝试加载 ListboxFor 控件。下面是我试图实现它的代码，但它不起作用。 任何人都可以指导我吗？提前致谢。

@Html.ListBoxFor(c => c.ClientDemographicHospitalId, new MultiSelectList(Model.Hospitals, "Value", "Text"), new { ng_model = "hospitalDropdownList", @class = "HospitalListbox", style = "width:65%" })

$.ajax({
    url: '/Controller/ActionMethod',
    type: "POST",
    dataType: "JSON",
    data: { clientId: clientId },
    success: function (data) {
        $("#ClientDemographicHospitalId").empty();
        $("#ClientDemographicHospitalId").append($('<option></option>').val(0).html("Select Hospital"));
        $.each(data, function (i, hospitals) {
            $("#ClientDemographicHospitalId").append($('<option></option>').val(hospitals.ClientDemographicHospitalId).html(hospitals.Name));
        });
    }
});

public ActionResult GetHospitalsByClient(int clientId)
{
    JsonResult result = new JsonResult();
    var hospitals = GetHospital(clientId);
    if (hospitals != null)
    {
        result.Data = hospitals.ToList();
        result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
    }
    return result;
}

Answer 1

也许您可以通过检查 DOM 元素来查看浏览器中呈现的 HTML？我认为问题可能就在那里，也是因为您从我假设的表中获取了 ID，并且您可能在 ListBox 中获取了一个 ID 为“20932”的 ID，并且您正在尝试调用 ID 为 #ClientDemographicHospitalId 的元素，这可能与您所指的不同，在这种情况下，您应该使用 HospitalListbox 类并调用 Jquery 元素，例如：

$(".HospitalListbox").empty();
$(".HospitalListbox").empty();
$(".HospitalListbox").append($('<option></option>').val(0).html("Select Hospital"));
$.each(data, function (i, hospitals) {
    $(".HospitalListbox").append($('<option></option>').val(hospitals.ClientDemographicHospitalId).html(hospitals.Name));
});

同样在AJAX调用成功里面，放一个console.log(data);以准确查看您正在接收哪些数据并希望将其放入这些元素中。