在通过 MVC 中的 Java 脚本填充 DropDownList 时需要帮助。列表未填充

Question

当我通过 MVC 使用 JavaScript 填充 DropDownList 时，我遇到了这个问题。我在填充 DDL 时收到 Uncaught TypeError: Cannot read property 'length' of undefined。

我的代码如下定义

查看：-

<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");
}

JavaScripts 函数：-

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 脚本的以下步骤中遇到错误。我正在从 Controller 获取数据，但没有填充到 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 的集合，只需将 $.each(msg 更新为 $.each(msg.d

Answer 2

它现在工作如下

视图的变化--

 <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;
    }

}