MVC 中两个下拉列表之间的关系

Question

我有两个下拉列表，当我从第一个选项中选择一个选项时，相关选项显示在第二个下拉列表中.我使用过jQuery，但我不知道为什么它有效。这是 CSHTML 页面：

 <div class="form-group">
        @Html.LabelFor(model => model.ProductSubGroup.ProductGroupID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("ProductGroupID", (SelectList)ViewBag.Type, "-- انتخاب ---", htmlAttributes: new { @class = "form-control",id = "rdbGroup" })
            @Html.ValidationMessageFor(model => model.ProductSubGroup.ProductGroupID, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.ProductSubGroupID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("ProductSubGroupID", (SelectList)ViewBag.ProductSubGroupID, "-- انتخاب ---", htmlAttributes: new { @class = "form-control",id = "rdbSubGroup" })
            @Html.ValidationMessageFor(model => model.ProductSubGroupID, "", new { @class = "text-danger" })
        </div>
    </div>

这是控制器

public ActionResult SelectCategory(int id)
 {
     var categoris = db.ProductSubGroup.Where(m => m.ProductGroup.ProductGroupID == id).Select(c => new { c.ProductSubGroupID, c.ProductSubGroupTitle});
     return Json(categoris, JsonRequestBehavior.AllowGet);
 }
 // GET: Admin/Products/Create
 public ActionResult Create()
 {
     ViewBag.ProductGroupID=new SelectList(db.ProductGroup,"ProductGroupID","Produ  ctGroupTitle");
     ViewBag.ProductSubGroupID = new SelectList(db.ProductSubGroup, "ProductSubGroupID", "ProductSubGroupTitle");

         return View();
 }

这是JavaScript

  $('#rdbGroup').change(function () {
                jQuery.getJSON('@Url.Action("SelectCategory")', { id: $(this).attr('value') }, function (data) {
                    $('#rdbSubGroup').empty();
                    jQuery.each(data, function (i) {
                        var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
                        $("#rdbSubGroup").append(option);
                    });
                });
            });

Answer 1

我的一个样本

CS.html

<div class="form-group">
        @Html.LabelFor(m => m.FakulteId, "Fakülte", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-6">
            @Html.DropDownListFor(m => m.FakulteId, ViewBag.Fakulte as SelectList, "Fakülte Seçiniz", htmlAttributes: new { @class = "form-control", @id = "fakulteSec", @onchange = "secim()" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.BolumId, "Bölüm", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-6">
            @Html.DropDownListFor(m => m.BolumId, ViewBag.Bolum as SelectList, "Bölüm Seçiniz", htmlAttributes: new { @class = "form-control", @id = "bolum" })
        </div>
    </div>

控制器

public JsonResult FakulteBolumDrop(int id)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<Bolum> bolum = db.Bolum.Where(b => b.FakulteId == id).ToList();
        return Json(bolum, JsonRequestBehavior.AllowGet);
    }

。.js

function secim() {
        var fakulteId = $('#fakulteSec').val();
        //alert(fakulteId);
        $.ajax({
            url: '/Rektor/FakulteBolumDrop?id=' + fakulteId,
            type: "POST",
            dataType: "JSON",
            data: { Fakulte: fakulteId },
            success: function (bolumler) {
                $("#bolum").html("");
                $.each(bolumler, function (i, bolum) {
                    $("#bolum").append(
                        $('<option></option>').val(bolum.BolumId).html(bolum.Adi));
                });
            }
        });
    }

Answer 2

您必须在

 $(document).ready(function(){
  });

否则不会被解雇。

Answer 3

使用 this.value 或 $(this).val() 而不是 $(this).attr('value') 。

尝试

 $('#rdbGroup').on('change',function () {// or $(document).on('change', '#rdbGroup',function (){
      $.getJSON('@Url.Action("SelectCategory")', { id: this.value }, function (data) {
       $('#rdbSubGroup').empty();
       $.each(data, function (i,item) {// if data is json string form the replace data by $.parseJSON(data)
          //console.log(item.Id); console.log(item.Title);
          $('#rdbSubGroup').append($('<option>', { 
               value:item.Id,
               text :item.Title 
        })); //OR you can use --- $('#rdbSubGroup').append($("<option></option>").attr("value",item.Id).text(item.Title)); 
         });
      });
    });

或

$('#rdbGroup').on('change',function () {// or $(document).on('change', '#rdbGroup',function (){
   var id= this.value;
    $.ajax({
        url: '@Url.Action("SelectCategory")',
        data: { 
            id: id
          },
        dataType: 'json',
        async: false
    }).done(function (data) {
        $("#rdbSubGroup").html("");           
        $.each(data, function (i,item) {         
            $('#rdbSubGroup').append($("<option></option>").attr("value",item.Id).text(item.Title)); 
            //OR $('#rdbSubGroup').append($('<option>', { value:item.Id, text :item.Title}));    
          });
       });        
    });