MVC dropdownlist，onchange

Question

我有一個2 Dropdownlistfor html，dropdownlistfor Country和dropdownlistfor狀態。即時通訊使用MVC，我想成爲這樣的輸出，如果我改變選定的國家，所選國家的狀態將被填入下拉列表狀態。我從數據庫中獲取國家和州的數據，而在州表中有一個countryId的字段。感謝幫助。

這裏是Html示例代碼。

  <div class="fieldBlock"> 
       <div><label>Country</label>&nbsp;*</div> 
       <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div> 
       @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation) 
       <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
      </div> 

      <div class="fieldBlock"> 
       <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div> 
       <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305" })</div> 
       <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
      </div> 

Answer 1

試試這個

在查看

<script type="text/javascript"> 
    $(function() { 
      $("#ddlCountry").change(function() { 
       var selectedItem = $(this).val(); 
       var ddlStates = $("#ddlState"); 
       var statesProgress = $("#states-loading-progress"); 
       statesProgress.show(); 
       $.ajax({ 
        cache: false, 
        type: "GET", 
        url: "@(Url.Action("SomeAction", "SomeController"))", 
        data: { "countryId": selectedItem}, 
        success: function (data) { 
         ddlStates.html(''); 
         $.each(data, function(id, option) { 
          ddlStates.append($('<option></option>').val(option.id).html(option.name)); 
         }); 

        }, 
        error:function (xhr, ajaxOptions, thrownError){ 
         alert('Failed to retrieve states.'); 

        } 
       }); 
      }); 
     }); 
    </script> 


<div class="fieldBlock"> 
    <div><label>Country</label>&nbsp;*</div> 
    <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div> 
    @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation) 
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
</div> 

<div class="fieldBlock"> 
    <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div> 
    <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305", @id = "ddlState" })</div> 
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
</div> 

在控制器

public ActionResult SomeAction(string countryId) 
{ 
    //perform your action here 
    var states = _stateProvinceService.GetStateProvincesByCountryId(country.Id).ToList(); 
    var result = (from s in states 
        select new { id = s.Id, name = s.GetLocalized(x => x.Name) } 
       ).ToList(); 

    return Json(result, JsonRequestBehavior.AllowGet); 
} 

注意：檢查是否Id被正確地綁定到下拉菜單，我已經在行動寫入的假碼得到狀態。