javascript - 根据之前的选择数据从 JSON 数据中加载选择选项

Question

我在这段代码中做错了什么：

<form action="">
    <select class="input-xlarge required" id="inputGender" name="inputGender">
        <option value="">select</option>
        <option value="m">male</option>
        <option value="w">female</option>
    </select>

    <select class="input-xlarge" id="inputWeight" name="inputWeight">
        <option value="">select</option>
    </select>

    <input type="submit" name="action" value="Book" />
</form>


var data = [
    [
        {"ID":"1", "desc":"(12)"},
        {"ID":"2", "desc":"(5)"},
        {"ID":"6", "desc":"(15)"}
    ]
    [
        {"ID":"0", "desc":"(49)"},
        {"ID":"7", "desc":"(5)"}
    ]
];


$("#inputGender").change((function() {
    var $persons = $("#inputWeight").empty();
    $.each(data[$(this).val() - 1], function() {
        $persons.append("<option value=" + this.ID + ">" + this.desc + "</option>");
    });
});

);

选择该值m后，我想填充此数据：

[
    {"ID":"1", "desc":"(12)"},
    {"ID":"2", "desc":"(5)"},
    {"ID":"6", "desc":"(15)"}
]

在选择 id #inputWeight。或者如果w被选中则显示：

[
    {"ID":"0", "desc":"(49)"},
    {"ID":"7", "desc":"(5)"}
]

...但它不工作。

请问有什么想法吗？

Answer 1

这一行是你的 JS 的问题：

$.each(data[$(this).val() - 1], function() {

$this.val()在此上下文中，表示 的值inputGender，可以是“m”或“w”。您必须从其他地方粘贴此代码，因为它假定整数值。尝试将您的数据更改为此：

var data = {
    m: [{"ID":"1","desc":"(12)"},{"ID":"2","desc":"(5)"},{"ID":"6","desc":"(15)"}],
    w: [{"ID":"0","desc":"(49)"},{"ID":"7","desc":"(5)"}]
};

然后你可以$(this).val()用来获取你想要的数组：

$("#inputGender").change(function() {
    var $persons = $("#inputWeight").empty();
    $.each(data[$(this).val()], function() {
        $persons.append("<option value=" + this.ID + ">" + this.desc + "</option>");
    });
});

看到它在这个小提琴中工作。