recogida - funcion no definida jquery

Error de tiempo de ejecución de JavaScript: no se puede obtener la propiedad ''forEach'' de referencia indefinida o nula

Question

Tengo una aplicación de página principal aspx donde tengo dos controles de lista desplegable en la sección asp: contenido de la página aspx secundaria. Uno de los controles se llena desde la base de datos SQL. El otro se completa en función del elemento seleccionado del primer menú desplegable. Estoy tratando de usar esta solución en mi código, sin embargo, estoy recibiendo un error:

Error de tiempo de ejecución de JavaScript: no se puede obtener la propiedad ''forEach'' de referencia indefinida o nula

¿Cómo puedo obtener los nombres de las ciudades que se mostrarán en función del Estado seleccionado?
Mi bloque de código es:

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

Actualizar:

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

El problema común con las páginas ASP.NET , especialmente si usa MasterPages .

Las páginas generadas tendrán sus IDs elementos modificadas.

Una solución para su problema es dar a estos elementos una class única y usarlos en el selector en lugar de sus 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;
});
});

Editado usando la recomendación @sebnukem para mantener los datos en un object , para que pueda deshacerse de eval() .

Se actualizó colocando todo el código en el controlador de eventos jQuery document ready.

Se actualizó devolviendo true en el controlador de eventos jQuery onchange para DropDownList , para continuar con PostBack .

Manifestación

Answer 2

Nunca use eval . Almacene sus datos en un objeto en su lugar:

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

Supongo que el elemento <asp:DropDownList> produce un elemento HTML con la ID especificada.