javascript - 使用 ajax 调用动态填充列表后刷新列表的显示值

Question

我有两个下拉列表 - 类别、子类别。当我选择一个类别时，子类别列表将根据该类别进行更新。类别 ID 通过 ajax 调用发送并返回所选的子类别。我也在使用粉底，但我一直在没有粉底的情况下测试所有东西，它本质上是相同的。

最初加载页面时，子类别将正确更新。当我更改为不同的类别时，子类别将正确更新，但子类别列表上的所选文本将与先前选择的值相同。有没有办法刷新列表上显示的文本？或者我的 javascript 做错了什么？此外，即使没有子类别，为子类别选择的值文本也将是先前的文本。我尝试在 Controller 操作中添加默认值服务器端，看看它是否默认为该值，但事实并非如此。

我的 HTML:

Subcategory: @Html.DropDownListFor(m => m.SubcategoryId, Subcategorylist,

"--Select--", new { id = "Subcategory"})

我的 JavaScript:

$(document).ready(function () {
    $("#Category").on("change", function () {
        debugger;       
        ChangeSubCategories(this.value);
        $(document).foundation();
    });
    ChangeSubCategories($("#Category").val());
    $(document).foundation();

    function ChangeSubCategories(categoryID) {
        debugger;
        $.ajax({
            type: "POST",
            url: "@Url.Action(MVC.Admin.GetSubCategories())",
            data: { categoryID: categoryID },
            success: function (data) {
                $('#Subcategory').empty();
                var options = $("#Subcategory");
                $.each(data, function () {
                    options.append($("<option />").val(this.Id).text(this.name));
                });
                $(document).foundation();
            },
        });

    }

});

Controller

 [HttpPost]
        public virtual JsonResult GetSubCategories(int categoryID)
        {
            using (MultimediaEntities context = new MultimediaEntities())
            {
                var subcategories = context.Subcategories.Where(x => x.parentCategoryId == categoryID).ToList();
                Subcategory Default = new Subcategory { Id = 0, isActive = false, parentCategoryId = 0, name = "Choose Subcategory" };
                subcategories.Insert(0, Default);
                return Json(subcategories, JsonRequestBehavior.AllowGet);
            }
        }

Controller 方法返回一个 JsonResult，其中包含基于所选类别列表值的项目列表。

Answer 1

在 Ajax.success 方法中您需要做的就是首先添加一个空白选项，然后添加从 ajax 调用返回的选项

基本上是这样的

jsFiddle:https://jsfiddle.net/y77appb0/

jQuery

$(function() {
  var array = [{
    name: "red",
    id: 1
  }, {
    name: "green",
    id: 2
  }, {
    name: "blue",
    id: 3
  }];

    // Append a please select at the start
  $('.colours').append($("<option />").val("").text("Please select"));
  // And if you really want to set the value do this
  $('.colours').val("");
  $.each(array, function(key, value) {
    $('.colours').append(
      $("<option />").val(value.id).text(value.name)
    );
  });
});