更改DropDownList的SelectList

Question

我的视图中有2个DropDownList项目。DropDownList1的SelectList从数据库中取出一次，不再更改。每次用户更改DropDownList1的所选索引时，DropDownList2的SelectedList也必须更改。

以下是我尝试实现此功能的方式：

@{
    var selectList1 = MyApp.Models.Model1.GetAll();
    Int32 selectedId = 0;
    @Html.DropDownListFor(s => selectedId, new SelectList(selectList1, 
                                                          "dataValueField1",
                                                          "dataTextField1") as SelectList, 
                          "Choose item...")
    var selectList2 =    MyApp.Models.Model2.GetItemsById(selectedId);
    @Html.DropDownListFor(model2 => model2.SelectedItem2, new  SelectList(selectList2, 
                                                                          "dataValueField2",
                                                                          "dataTextField2") as SelectList,
                          "Choose item2..")
}

我知道，每次当DropDownList1的选定索引发生变化时，我都要更新selectList2变量，之后还要更新DropDownList2。那么，实现这种行为的最佳方式是什么呢？

Answer 1

当名为ddlBusinessAreaId的下拉列表更改时，它将清空名为ddlFunctionalAreaId的下拉列表中的项目。然后，它向blah控制器上存在的名为GetFunctionalAreas的方法发出post请求。然后循环遍历结果并将它们作为项目添加到ddlFunctionalAreaId下拉列表中。

$('#ddlFunctionalAreaId').change(function () {            
        $('#BusinessOwner').val("");
        $.ajax({
            type: 'POST',
            url: 'GetBusinessOwner',
            dataType: 'json',
            data: { id: $('#ddlFunctionalAreaId').val() },

            success: function (businessOwner) {
                if (businessOwner != null) {
                    $("#BusinessOwner_UserName").val(businessOwner.UserName);
                    $("#BusinessOwner_DisplayName").val(businessOwner.DisplayName);
                }
            },
            error: function (ex) {
                //alert('Failed to retrieve Business Owner.' + ex);
            }
        })
    });


    $('#ddlBusinessAreaId').change(function () {
        $('#ddlFunctionalAreaId').empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("../../blah/blah/GetFunctionalAreas")',
            dataType: 'json',
            data: { id: $('#ddlBusinessAreaId').val() },

            success: function (functionalAreas) {
                $.each(functionalAreas, function (i, functionalArea) {
                    $("#ddlFunctionalAreaId").append('<option value="' + functionalArea.Value + '">' +
                         functionalArea.Text + '</option>');
                });
                $('#ddlFunctionalAreaId').trigger('change');

            },
            error: function (ex) {
                //alert('Failed to retrieve functional areas.' + ex);
            }
        })
    });

Answer 2

我必须使用Jquery来检测第一个字段中的更改 .change()。编写一个Controller服务，用于通过Ajax方法更新第二个dropdown。检查此示例An ASP.NET MVC Cascading Dropdown List

Answer 3

您必须使用jquery来连接到服务器端，并将数据绑定到第二个dropdown。这是样例

         @{
         ViewBag.Title = "Classic Cascading DDL";
          }

@using (Html.BeginForm("IndexDDL", "Home", FormMethod.Post, 
new { id = "CountryStateFormID", 
      data_stateListAction = @Url.Action("StateList") })) {

   <fieldset>
    <legend>Country/State</legend>
    @Html.DropDownList("Countries", ViewBag.Country as SelectList,
        "Select a Country", new { id = "CountriesID" })
    <div id="StatesDivID" >
        <label for="States">States</label>
        <select id="StatesID"  name="States"></select>
    </div>
    <p>
        <input type="submit" value="Submit" id="SubmitID" />
    </p>
    </fieldset>
  }

c#

     public SelectList GetCountrySelectList() 
     {
       var countries = Country.GetCountries();
       return new SelectList(countries.ToArray(),
                    "Code",
                    "Name");
     }

  public ActionResult IndexDDL() 
  {
   ViewBag.Country = GetCountrySelectList();
   return View();
  }

Javascript函数

           $(function () { 

$('#StatesDivID').hide(); 
$('#SubmitID').hide(); 

$('#CountriesID').change(function () { 
    var URL = $('#CountryStateFormID').data('stateListAction'); 
    $.getJSON(URL + '/' + $('#CountriesID').val(), function (data) { 
        var items = '<option>Select a State</option>'; 
        $.each(data, function (i, state) { 
            items += "<option value='" + state.Value + "'>" + state.Text + "</option>"; 
            // state.Value cannot contain ' character. We are OK because state.Value = cnt++; 
        }); 
        $('#StatesID').html(items); 
        $('#StatesDivID').show(); 

    }); 
}); 

$('#StatesID').change(function () { 
    $('#SubmitID').show(); 
}); 
});