jQuery를 사용하여 select 옵션을 동적으로 생성하는 동안 'Uncaught TypeError'

Question

다른 선택 상자에서 선택한 옵션에 따라 jQuery를 사용하여 하나의 선택 상자에서 사용 가능한 옵션을 동적으로 설정합니다. 선택된 옵션에 따라 '2'변수 'entop_1 "변경이 예제 오류에 나열된

Uncaught TypeError: Cannot use 'in' operator to search for '2' in entop_1 

수 : I이 옵션을 선택하면하지만 난 오류가 발생합니다. 이 문제에 대한 도움을 주시면 감사하겠습니다.

저는 현재 jQuery 2.0.0 분을 사용하고 있습니다.

<form id="addForm"> 

<!-- Ent Select --> 
<select id="ent_id" name="ent_id"> 
<option value="0">- Select -</option> 
<option value="1">Ent 1</option> 
<option value="2">Ent 2</option> 
<option value="3">Ent 3</option> 
</select> 

<!-- Cat Select --> 
<select id="cat_id" name="cat_id"></select> 

</form> 

그리고 스크립트는 다음과 같습니다 : 사용 형태는 'entop_' + $ent_var이 배열을 의미

<script type="text/javascript"> 
var entop_1 = {"- Select -": "0","Option A": "1","Option B": "2",}; 
var entop_2 = {"- Select -": "0","Option C": "3","Option D": "4",}; 
var entop_3 = {"- Select -": "0","Option E": "5","Option F": "6",}; 
$("#ent_id").change(function() 
{ 
    var $cat_set = $("#cat_id"); 
    $cat_set.empty(); // remove old options 
    var $ent_var = $("#ent_id option:selected").val(); 

    $.each('entop_' + $ent_var, function(key, value) { 
     $cat_set.append($("<option></option>").attr("value", value).text(key)); 
    }); 

}); 
</script> 

Answer 1

당신은 그것에 대해 eval을 사용할 수 있습니다.

$.each('entop_' + $ent_var, function(key, value) { 

이 줄은

$.each(eval('entop_' + $ent_var), function(key, value) { 

해야하지만이 방법 문제 두 가지가 있습니다 :

1. Eval is evil.
2. $.each 만 배열이 아닌 객체와 함께 사용해야합니다은.
   이

   var keys = { 
       1: { 
        "- Select -": "0", 
        "Option A": "1", 
        "Option B": "2", 
       }, 
       2: { 
        "- Select -": "0", 
        "Option C": "3", 
        "Option D": "4", 
       }, 
       3: { 
        "- Select -": "0", 
        "Option E": "5", 
        "Option F": "6", 
       } 
   } 
   

   그런 다음 for..in

   $("#ent_id").change(function() { 
       var $cat_set = $("#cat_id"); 
       $cat_set.empty(); // remove old options 
       var $ent_var = $("#ent_id option:selected").val(); 
       //find the corresponding value in object 
       var options = keys[$ent_var]; 
       // use for..in, not each 
       for (var a in options) { 
        $cat_set.append($("<option/>", { 
         "text": a, 
         "value": options[a] 
        })); 
       } 
   }); 
   

   을 사용할 수

더 좋은 방법이 같은 하나 개 모음으로 데이터 오브젝트를 포맷하는 것을 (당신은 length is undefined 오류가 발생합니다)

하지만 주문에주의하십시오. 때때로 for..in은 배열을 순서대로 처리하지 않습니다.

데모 :

Answer 2

경우, 당신도 eval 문자열, 또는해야합니다 - 배열이 세계적있는 경우 - 얻을 window['entop_' + $ent_var]를 사용 글로벌 window 오브젝트의 배열

그렇지 않으면 jQuery가 문자열 반복을 시도합니다.

여기에 수정, 당신의 코드 싹둑입니다 :

$.each(eval('entop_' + $ent_var), function(key, value) { 
    $cat_set.append($("<option></option>").attr("value", value).text(key)); 
}); 

또는

$.each(window['entop_' + $ent_var], function(key, value) { 
    $cat_set.append($("<option></option>").attr("value", value).text(key)); 
});