Question

当我通过MVC通过JavaScript填充DropDownList时，我遇到了问题。我收到未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;在填充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");
}

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 {u}

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

}

从MVC通过Java脚本填充DropDownList时需要帮助。列表没有填充

2 个答案: