将 JSON 放入选择框并使用 Jquery 显示答案

Question

我有一个巨大的 JSON 文件，每个对象都有三个属性：

[
    {
        "Product": "Hurtta Frost Jacket",
        "Dog Type": "Affenpinscher",
        "Size for the dog": "25, 30"
    },
    {
        "Product": "Hurtta Frost Jacket",
        "Dog Type": "Afghan Hound",
        "Size for the dog": "60, 65"
    }
]

狗的类型和尺寸。

What I need is to make to select boxes one for the Product and one for the Dog Type, and when these two options are selected the size for the dog for that object will display in a div anywhere.实现这一目标的正确方法是什么？

Answer 1

<select id="product"><option value="">Select Product</option></select>
<select id="type"><option value="">Select Dog Type</select></select>
<br>Size:
<div id="size"></div>

$(function () {
    json_obj = [{
        "Product": "Hurtta Frost Jacket",
            "Dog Type": "Affenpinscher",
            "Size for the dog": "25, 30"
    }, {
        "Product": "Hurtta Frost Jacket",
            "Dog Type": "Afghan Hound",
            "Size for the dog": "60, 65"
    }];
    var products_added = {};
    var types_added = {};
    $.each(json_obj, function () {
        if (!products_added[this.Product]) {
            $("#product").append($("<option/>", {
                value: this.Product,
                text: this.Product
            }));
            products_added[this.Product] = true;
        }
        if (!types_added[this["Dog Type"]]) {
            $("#type").append($("<option/>", {
                value: this["Dog Type"],
                text: this["Dog Type"]
            }));
            types_added[this["Dog Type"]] = true;
        }
    });

    $("#product, #type").change(function () {
        $("#size").empty();
        var product = $("#product").val();
        var type = $("#type").val();
        if (product && type) {
            $.each(json_obj, function () {
                if (product == this.Product && type == this["Dog Type"]) {
                    $("#size").text(this["Size for the dog"]);
                    return false; // terminate the loop
                }
            });
        }
    });
});

DEMO