Need Help while Populating the DropDownList via Java Script from MVC. List not populating

Question

I am facing the problem when I am populating the DropDownList by JavaScript via MVC. I am getting the Uncaught TypeError: Cannot read property 'length' of undefined while populating the DDL.

My Code as define below

View:-

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

Controller : -

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

JavaScripts function:-

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

I am facing the error at below step in java script. I am getting the data from Controller but not populating in DDL.

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

Answer 1

Its working now as below

Changes in 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>

-- Inside Java Scripts

$().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;
    }

}

Answer 2

I do not know what you are trying to do with that line. But if you are trying to replace the options of your second dropdown with the data coming from the server, you can simply do this.

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

Also there is no reason for you to explicitly Serialize the data to json format because there is already a Json method which does that for you.

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

This code will work assuming your DashboardGetSubRetailer method returns a collection of items each with a SubRetailerID and a SubRetailerName property. If you have a single property called d which the collection, just udpate the $.each(msg with $.each(msg.d