根据以前的选择数据从JSON数据加载选择选项

Load select option from JSON data according to previous select data

本文关键字：数据 选择 JSON 加载 选项      更新时间：2023-09-26

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

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

但它不起作用。

有什么想法吗？

这一行是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>");
    });
});

看看它在这把小提琴里现场演奏。

相关文章：