下拉菜單填充另一個c＃mvc json ajax

Question

下面是我的代碼，我不知道我在做什麼錯了？

的Ajax JSON jQuery代碼

function FillCity() { 
    var countryid = $("select[name$='.countryid']").val();  //<---- this is dynamic 
    $.ajax({ 
     url: "Controller/FillMyCity", 
     type: "POST", 
     dataType: "json",   
     data: { country: countryid } ,   
     success: function (city) { 
      $("select[name$='.cityid']").html(""); // <--- this is dynamic 
      $.each(city, function (i, pp) { 
       $("select[name$='.cityid']").append(
        $('<option></option>').val(pp.cityid).html(pp.name)); 
      });    
     }, 
     error: function (err) {     
      alert(err); 
     } 
    }); 
} 

控制器方法

public JsonResult FillMyCity(int country) 
{ 

    var cities = db.Cities.Where(x => x.countryid == country).ToList().Select(item => new City 
    { 
     cityid = item.cityid, 
     name = item.name 
    }).AsQueryable(); 
    return Json(cities, JsonRequestBehavior.AllowGet); 
} 

查看

@Html.DropDownList("Country[" + i + "].countryid", (SelectList)ViewData[countries], string.Empty, new { @class = "form-control countries", @id = "mycountry" + i + "", @onchange = "FillCity()" }) 
@Html.DropDownList("City[" + i + "].cityid", new SelectList(Enumerable.Empty<SelectListItem>(), "cityid", "name"), "Select city", new { @class = "form-control cities", @id = "mycity" + i + "" })  

輸出

EmployeeName Country      City 
Jenny   ddl of countries    ddl of cities  
John   ddl of countries    ddl of cities 

問題1：當我選擇Jenny的國家時，Jenny + John的城市ddl都有Jenny's Country的城市居住，但它只應用於Jenny。當我選擇國家約翰城市DDL列表沒有得到填充所以只有珍妮的作品，約翰不

問題2：因爲它是一個動態json jquery附加html，我無法保存城市的價值，這是由於它是動態的並且不出現在視圖源中。

Answer 1

您對$("select[name$='.countryid']").val();的使用只會選擇具有name屬性以.countryid結尾的第一個元素的值。

另外，您使用DropDownList("Country[" + i + "].countryid", ...)不是正確的方式來爲集合生成控件，並且它不太可能會正確地綁定到您的模型，但是您尚未顯示該模型，因此無法修復，因此根據您當前的代碼，您認爲應該是

<div class="container"> 
    @Html.DropDownList("Country[" + i + "].countryid", (SelectList)ViewData[countries], string.Empty, new { @class = "form-control countries" }) 
    @Html.DropDownList("City[" + i + "].cityid", Enumerable.Empty<SelectListItem>(), new { @class = "form-control cities" }) 
</div> 

和腳本

$('.countries').change(function() { 
    var country = $(this).val(); 
    var cities = $(this).next('.cities'); // get the associated cities dropdownlist 
    cities.empty(); // clear existing options 
    $.ajax({ 
     url: '@Url.Action("FillMyCity")', // do not hard code url's 
     type: "POST", 
     dataType: "json",   
     data: { country: country } ,   
     success: function (data) { 
      if (data) { 
       cities.append($('<option></option>').val('').text('Select city')); 
       $.each(data, function (index, item) { 
        cities.append($('<option</option>').val(item.cityid).html(item.name)); 
       }); 
      } else { 
       // oops 
      }    
     }, 
     error: function (err) {     
      alert(err); 
     } 
    }); 
}); 

，最後，返回包含只有你在視圖中需要避免發送額外的數據將在數據匿名對象的集合不是你sed

public JsonResult FillMyCity(int country) 
{ 
    // No need for .ToList() 
    var cities = db.Cities.Where(x => x.countryid == country).Select(item => new 
    { 
     cityid = item.cityid, 
     name = item.name 
    }); 
    return Json(cities); // its a POST so no need for JsonRequestBehavior.AllowGet 
}