Question

我在页面上有2个下拉列表。当我从第一个下拉列表中选择某个值时，然后在第二个下拉列表中，所有值均应根据所选值加载（根据类别加载子类别）。这是我尝试过的方法，但是不起作用：

模型

 public class Product
    { ...
      public int CategoryId { get; set; }
      public virtual Category Category { get; set; }
      public IEnumerable<SelectListItem> Categories { get; set; }

      public int SubCategoryId { get; set; }
      public virtual SubCategory SubCategory { get; set; }
      public IEnumerable<SelectListItem> SubCategories { get; set; }
      ...
    }

查看

  <label>Select Category</label>
  @Html.DropDownListFor(m => m.CategoryId, new SelectList(Model.Categories, "Value", "Text"), "Select Category", new { id = "catList", @class = "form-control" })

  <label>Selectat Subcategory</label>
  @Html.DropDownListFor(m => m.SubCategoryId, new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Selectat Subcategory", new { id = "subcatList", @class = "form-control" })

<script type="text/javascript">
    $(document).ready(function () {
        $("#catList").change(function () {
            var cID = $(this).val();
            $.getJSON("../Product/New/LoadSubCategories", { catId: cID },
                function (data) {
                    var select = $("#subcatList");
                    select.empty();
                    select.append($('<option/>', {
                        value: 0,
                        text: "Selecteaza o subcategorie"
                    }));
                    $.each(data, function (index, itemData) {
                        select.append($('<option/>', {
                            value: itemData.Value,
                            text: itemData.Text
                        }));
                    });
                });
        });
    });
</script>

控制器

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadSubCategories(string catId)
{
    var subCatList = GetAllSubCategories(Convert.ToInt32(catId));
    return Json(subCatList, JsonRequestBehavior.AllowGet);
}

[NonAction]
public IEnumerable<SelectListItem> GetAllSubCategories(int selectedCatId)
{
      //generate empty list
      var selectList = new List<SelectListItem>();

      var subcategories = from sbcat in db.SubCategories
                          where sbcat.CategoryId == selectedCatId
                          select sbcat;
      foreach (var subcategory in subcategories)
      {
           //add elements in dropdown
           selectList.Add(new SelectListItem
           {
                Value = subcategory.SubCategoryId.ToString(),
                Text = subcategory.SubCategoryName.ToString()
            });
       }
      return selectList;
}

Answer 1

您需要将getJson更改为Ajax的方法

这是ajax示例代码

$.ajax({
                type: "GET",
                url: '/Product/New/LoadSubCategories',
                data: {catId: cID},
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data) {     
                var select = $("#subcatList");
                select.empty();
                select.append($('<option/>', {
                    value: 0,
                    text: "Selecteaza o subcategorie"
                }));
                $.each(data, function (index, itemData) {
                    select.append($('<option/>', {
                        value: itemData.Value,
                        text: itemData.Text
                    }));
                });
            }

            function errorFunc() {
                alert('error');
            }
        });

您需要在下拉列表更改时编写此ajax代码，并且在成功进行ajax调用时，您需要编写在下拉列表的值更改和成功接收数据时要执行的代码

Answer 2

要根据第一个下拉值更改第二个下拉值，您需要编写一个Onchange事件，然后只有它才能得到更改。.请检查下面的stackoverflow问题，答案将对您有帮助

Click here

MVC ASP.NET Dropdown onchange加载另一个下拉列表

2 个答案: