Question

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

Answer 1

您可以使用eval。这一行

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

必须是

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

但这种方法存在两个问题：

Eval is evil.
$.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/

Answer 2

如果'entop_' + $ent_var引用数组，则应该eval字符串，或者 - 如果数组位于全局 - 使用window['entop_' + $ent_var]使数组脱离全局{{1}对象。

否则，jQuery将尝试迭代字符串，我想。

以下是您修改的代码片段：

window

或

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

使用jQuery动态创建选择选项时'未捕获的TypeError'

2 个答案: