JavaScript runtime error: unable to get "forEach" property from undefined or null reference

Question

I have an aspx Master page application where I have two dropdownlist controls in the asp: content section of an aspx child page. One of the controls is populated from an SQL database. The other is populated based on the item selected from the first drop-down list. I try to use this solution in my code, however I get an error message:

JavaScript runtime error: cannot get property "forEach" undefined or null reference

How can I get city names to display based on the selected state?
My code block:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script type="text/javascript"> AL = new Array('Birmingham', 'Montgomery', 'Tuscaloosa'); FL = new Array('Miami', 'FtLauderdale', 'Jacksonville'); GA = new Array('Atlanta', 'Macon', 'Athens'); populateSelect(); $(function () { $('#ddlState').change(function () { populateSelect(); }); }); function populateSelect() { category = $('#ddlState').val(); $('#ddlCity').html(''); eval(category).forEach(function (t) { $('#ddlCity').append('<option>' + t + '</option>'); }); } </script> <asp:DropDownList ID="ddlCity" runat="server" CssClass="stdFldWidth" onchange="setFDFlag()"> </asp:DropDownList> <asp:DropDownList ID="ddlState" runat="server" CssClass="stdFldWidth" DataSourceID="dsUSState" DataTextField="US_State" DataValueField="State_ID" AutoPostBack="true" > </asp:DropDownList> 

Update:

 Protected Sub ddlState_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles ddlType.SelectedIndexChanged If ddlState.SelectedValue = "FL" Then DisplayRegulation(FL) End If 

Answer 1

A common problem with ASP.NET pages, especially if you use MasterPages .

Generated pages will have their elements IDs changed.

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

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

...

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

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

Updated by putting all the code in a jQuery event handler.

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

Demo

Answer 2

Never use eval . Instead, save the data in an object:

 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 assume that the <asp:DropDownList> element creates an HTML element with the specified identifier.