2013-07-24 37 views
0

我正在使用jQuery動態地設置一個選擇框中可用的選項基於在另一個選擇框中選擇的選項。但是,當我選擇一個選項我得到錯誤:'Uncaught TypeError',同時動態創建使用jQuery選擇選項

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

基於被選擇的選項上在此實例中錯誤列爲「2」和變量「entop_1」變數。任何有關這個問題的幫助將不勝感激。

我目前正在使用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> 

和腳本是:

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

是' 'entop_' + $ ent_var'應該是一個元素類..?在這種情況下,你在開始時會缺少'.'。否則,我不確定你想要'$ .each()'over ..? –

+0

我試圖追加使用數組'entop_1','entop_2'和'entop_3'的選項。 – RebDev

回答

1

你可以使用eval了點。這條線

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

必須

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

但有兩件事情不對的這種做法:

  1. ​​
  2. $.each只能使用數組,而不是對象使用。 (你會得到一個錯誤length is undefined

一種更好的方式將您的數據對象格式化成一個集,這樣的:

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

但是,要小心順序。有時for..in將不會按順序通過陣列。

演示:http://jsfiddle.net/f6Jps/

0

如果'entop_' + $ent_var指的是陣列,您應該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)); 
});