자바 스크립트 런타임 오류 : 정의되지 않은 또는 null 참조의 'forEach'속성을 가져올 수 없습니다.

Question

자식 aspx 페이지의 asp : content 섹션에 두 개의 드롭 다운 목록 컨트롤이있는 aspx 마스터 페이지 응용 프로그램이 있습니다. 컨트롤 중 하나는 SQL 데이터베이스에서 채워집니다. 다른 하나는 첫 번째 드롭 다운에서 선택한 항목을 기반으로 채워집니다. 도시 이름이 주 선택에 따라 표시 할

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

는 어떻게 얻을 수 있습니다 : 나는 그러나 나는 오류가 발생하고, 내 코드에 this solution를 사용하려고?
내 코드 블록은 다음과 같습니다

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

업데이트 :

이

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

을 사용하는 경우 ASP.NET 페이지에서 자주 발생하는 문제입니다.

생성 된 페이지의 요소는 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; 
    }); 
}); 

편집 사용 @ : 당신의 문제에 대한

하나 개의 솔루션은 이러한 요소에 고유 한 class을 포기하고 대신 자신의 IDs의 선택기를 사용하는 것입니다 sebnukem 권고안은 object에 데이터를 보관하므로 eval()을 제거 할 수 있습니다.

jQuery 문서 준비 이벤트 핸들러 내에 전체 코드를 삽입하여을 업데이트했습니다. PostBack과에서 수행의 DropDownList의 jQuery에서 onchange를 이벤트 처리기를 진정한 반환하여

업데이트 .

Demo

Answer 2

eval를 사용하지 마십시오. 대신 객체에 데이터를 저장 : 나는 <asp:DropDownList> 요소는 지정된 ID를 가진 HTML 요소를 생산한다는 것을 가정하고

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

.