在MVC中通過Java腳本填充DropDownList時需要幫助。 List not populating

Question

當我通過MVC通過JavaScript填充DropDownList時，我面臨着這個問題。我得到了Uncaught TypeError：在填充DDL時無法讀取未定義的的屬性「長度」。

我的代碼作爲定義如下

查看： -

<div class="form-group"> 
    <label>SubRetailer</label> 
    @Html.DropDownListFor(m => m.SubRetailer, Model.SubRetailerList, "All Selected", new { @class = "form-control", id = "SubParentRetailerDDL" })   
</div> 

控制器： -

public ActionResult getSubRetailer(int ParentRetailerID) 
{ 
    List<DashboardGetSubRetailer_Result> lstDesig = db.DashboardGetSubRetailer(ParentRetailerID).ToList(); 
    return Content(JsonConvert.SerializeObject(lstDesig), "application/json"); 
} 

JavaScript的功能： -

function GetNames(ParentRetailerID) { 
    if (ParentRetailerID > 0) { 
     $("#SubParentRetailerDDL").get(0).options.length = 0; 
     $("#SubParentRetailerDDL").get(0).options[0] = new Option("Loading SubRetailer", "-1"); 
     alert("ParentRetailerID : "+ ParentRetailerID); 
     $.ajax({ 
      type: "POST", 
      url: "Search/getSubRetailer", 
      data: "{ParentRetailerID:" + ParentRetailerID + "}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       alert("success : " + ParentRetailerID); 
       $("#SubParentRetailerDDL").get(0).options.length = 0;    
       $("#SubParentRetailerDDL").get(0).options[0] = new Option("Select SubRetailerName", "-1"); 
       **$.each(msg.d, function (index, item) { 
        $("#SubParentRetailerDDL").get(0).options[$("#SubParentRetailerDDL").get(0).options.length] = new Option(item.SubRetailerName, item.SubRetailerID);      
       }); 
      },** 
      error: function() { 
       alert("error : " + ParentRetailerID); 
       $("#SubParentRetailerDDL").get(0).options.length = 0; 
       alert("Failed to load SubRetailer"); 
      } 
     }); 
    } 
    else { 
     $("#SubParentRetailerDDL").get(0).options.length = 0; 
    } 
} 

我面對錯誤的在java下面的步驟腳本。我從控制器獲取數據，但沒有填充到DDL中。

$.each(msg.d, function (index, item) {    
    $("#SubParentRetailerDDL").get(0).options[$("#SubParentRetailerDDL").get(0).options.length] = new Option(item.SubRetailerName, item.SubRetailerID);      
}); 

Answer 1

我不知道你在用那條線做什麼。但是，如果您試圖用來自服務器的數據替換第二個下拉列表中的選項，則可以簡單地執行此操作。

$("#SubParentRetailerDDL").html(""); //Clear existing items 

//loop through the items came back and append to dropdown 

$.each(msg, function (index, item) { 
     $("#SubParentRetailerDDL") 
     .append("<option value='"+item.SubRetailerID+"'>"+item.SubRetailerName+"</option>"); 
}); 

也沒有理由讓你明確地序列化數據，以JSON格式，因爲已經有一個Json方法，它會替你。

public ActionResult getSubRetailer(int ParentRetailerID) 
{ 
    var data = db.DashboardGetSubRetailer(ParentRetailerID).ToList(); 
    return Json(data , JsonRequestBehavior.AllowGet); 
} 

此代碼將工作假設你DashboardGetSubRetailer方法返回一個SubRetailerID和SubRetailerName財產的每個項目的集合。如果你有一個單獨的屬性稱爲d資源集合，只是UDPATE的$.each(msg與$.each(msg.d

Answer 2

其在View--現在的工作如下

變化

<div class="form-group"> 
<label>Retailer</label>  
@Html.DropDownListFor(m => m.Retailer, new SelectList(Model.lstParentRetailsDetails, "ParentRetailerID", "ParentRetailerName"), "All Selected", new { id = "ParentRetailerDDL", @class = "form-control" })        
</div> 

<div class="form-group"> 
<label>SubRetailer</label> 
@Html.DropDownListFor(m => m.SubRetailer, new SelectList(Enumerable.Empty<SelectListItem>(), "SubRetailerID", "SubRetailerName"), "All Selected", new { @class = "form-control", id = "SubParentRetailerDDL" }) 
</div> 

- 內Java腳本

$().ready(function (msg) { 
    $("#ParentRetailerDDL").bind("change", function() { 
     GetNames($(this).val()); 
    }); 
}); 

function GetNames(ParentRetailerID) { 
    if (ParentRetailerID > 0) { 
     $("#SubParentRetailerDDL").empty(); 
     $.ajax({ 
      type: "POST", 
      url: "Search/getSubRetailer", 
      data: "{ParentRetailerID:" + ParentRetailerID + "}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       $.each(msg, function (index, item) { 
        $("#SubParentRetailerDDL").append("<option value='" + item.SubRetailerID + "'>" + item.SubRetailerName + "</option>"); 
       }); 
      }, 
      error: function() { 
       $("#SubParentRetailerDDL").get(0).options.length = 0; 
       alert("Failed to load SubRetailer"); 
      } 
     }); 
    } 
    else { 
     $("#SubParentRetailerDDL").get(0).options.length = 0; 
    } 

}