Rectangle 27 1

jquery JavaScript runtime error: Unable to get property 'forEach' of undefined or null reference?


$(function () {
    var states = {
        AL: ['Birmingham', 'Montgomery', 'Tuscaloosa'],
        FL: ['Miami', 'FtLauderdale', 'Jacksonville'],
        GA: ['Atlanta', 'Macon', 'Athens']
    };

    function populateSelect() {
        $('.ddlCity').empty();

        var stateSelected = $('.ddlState').val();

        if (stateSelected) {
            states[stateSelected].forEach(function (sel) {
                $('<option>').val(sel).text(sel).appendTo($('.ddlCity'));
            });
        }
    }

    populateSelect();

    $('.ddlState').on('change', function() { 
        populateSelect();

        return true;
    });
});
<asp:DropDownList ID="ddlCity" runat="server" CssClass="stdFldWidth ddlCity" onchange="setFDFlag()">
</asp:DropDownList>    

<asp:DropDownList ID="ddlState" runat="server" CssClass="stdFldWidth ddlState" DataSourceID="dsUSState"
    DataTextField="US_State" DataValueField="State_ID" AutoPostBack="true" > 
</asp:DropDownList>
IDs

Ah, sure. I've forgotten to add the call to the populateSelect(). Try the updated answer (just edited) again please.

Edited using @sebnukem recommendation to keep the data in an object, so you can get rid of the eval().

I updated my original post with the codebehind. I tried adding the values to ddlCity in the codebehind, but it didnt work. I was thinking jquery would be an easier option.

One solution for your problem is to give these elements a unique class and use it in the selector instead of their IDs:

The common issue with ASP.NET pages, specially if you use MasterPages.

Updated by placing the whole code within the jQuery document ready event handler.

Updated by returning true in the jQuery onchange event handler for the DropDownList, to carry on with the PostBack.

Which part? I've updated the answer, now having all the Javascript/jQuery code within the document ready event handler - $(function () { });. And I don't believe you have an issue in your codebehind that could be messing up with this code - causing the Javascript error stated in your question.

Your codebehind doesn't seem to be taking part in the problem stated in the question.

Note
Rectangle 27 1

jquery JavaScript runtime error: Unable to get property 'forEach' of undefined or null reference?


var states = {
    'AL': ['Birmingham', 'Montgomery', 'Tuscaloosa'],
    'FL': ['Miami', 'FtLauderdale', 'Jacksonville'],
    'GA': ['Atlanta', 'Macon', 'Athens']
};

function populateSelect() {
    var category = $('#ddlState').val(); // selected state

    if (category && states[category]) {
        $('#ddlCity').html('');
        states[category].forEach(function (t) {
            $('#ddlCity').append('<option>' + t + '</option>');
        });
    } else {
        console.log('invalid state input: '+category); 
    }
}

$(function () {
    $('#ddlState').change(function () {
        populateSelect();
    });
    populateSelect();
});

I am assuming that the <asp:DropDownList> element does produce an HTML element with the specified ID.

Never use eval. Store your data in an object instead:

still getting the same error message

then that means that the category value doesn't match any key in the states object. Check your value with a console.log('state = '+category); statement.

Note