Ajax 未附加到我的下拉列表（C# MVC）

Question

我正忙于 2 个下拉菜单。第一个是国家，加载正常，然后在国家改变时我调用 ajax 来填充省份下拉列表。

代码工作正常，当我在我的 ajax 调用中发出警报时，它会显示正在创建的正确数据，但它不会将其附加到下拉列表中，因此这些值不可用。

下拉

 <div class="form-group">
                        <label class="col-md-3 col-xs-5 control-label">Country:</label>
                        <div class="col-md-9 col-xs-7">
                            @Html.DropDownListFor(x => x.CountryId, (IEnumerable<SelectListItem>)ViewBag.CountryItems, "Please Select", new { @id = "ddlCountry", @class = "form-control select" })
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 col-xs-5 control-label">Province:</label>
                        <div class="col-md-9 col-xs-7">
                            @Html.DropDownListFor(x => x.ProvinceId, Enumerable.Empty<SelectListItem>(), "Please Select", new { @id = "ddlProvince", @class = "form-control select" })
                        </div>
                    </div>

阿贾克斯

<script>
    $('#ddlCountry').change(function () {
        var countries = document.getElementById("ddlCountry");
        var countryId = countries.options[countries.selectedIndex].value;

        $.ajax({
            url: "/Master/GetProvinces",
            data: { countryId: countryId },
            dataType: "json",
            type: "GET",
            error: function () {
                alert(" An error occurred.");
            },
            success: function (data) {
                $.each(data, function (i) {
                    var optionhtml = '<option value="' + data[i].Value + '">' + data[i].Text + '</option>';
                    $("#ddlProvince").append(optionhtml);
                });
            }
        });
    });
</script>

背后的代码

 public ActionResult GetProvinces(string countryId)
    {
        IEnumerable<SelectListItem> ProvinceItems = null;

        if (!string.IsNullOrEmpty(countryId))
        {
            ProvinceItems = BusinessAPI.ProvinceManager.GetAllProvincesByCountryId(Convert.ToInt32(countryId)).Select(ci => new SelectListItem
            {
                Value = ci.Id.ToString(),
                Text = ci.Name
            });
        }

        return Json(ProvinceItems, JsonRequestBehavior.AllowGet);
    }

Answer 1

我发现了问题。 我有一个 javascript 文件，这会导致一些问题。

<script type="text/javascript" src="../../Scripts/js/plugins/bootstrap/bootstrap-select.js"></script>

这是我购买的模板附带的，它有助于下拉菜单和其他内容的工作方式。

使用该 javascript 文件，您必须添加 .selectpicker('refresh');像这样正确加载它

$("#ddlProvince").append(optionshtml).selectpicker('refresh');

加载大量数据时可能会很慢，因此只需在一切正常后刷新下拉菜单即可。这是现在适合我的代码

$('#ddlCountry').change(function () {
        var countries = document.getElementById("ddlCountry");
        var countryId = countries.options[countries.selectedIndex].value;

        $.ajax({
            url: "/Master/GetProvinces",
            data: { countryId: countryId },
            dataType: "json",
            async: true,
            type: "GET",
            error: function () {
                alert(" An error occurred.");
            },
            success: function (data) {
                ("#ddlProvince").empty();
                $.each(data, function (i) {
                    var optionshtml = '<option value="' + data[i].Value + '">' + data[i].Text + '</option>';
                    $("#ddlProvince").append(optionshtml);
                });
                $("#ddlProvince").selectpicker('refresh');
            }
        });
    });