Javascript 使用json进行组合选择

国家和州将作为json发送

{
    "data": [
        {
            "country": "USA",
            "states": [
                "Alabama",
                "Alaska",
                "Arizona"
            ]
        },
        {
            "country": "India",
            "states": [
                "TN",
                "AP",
                "Mumbai"
            ]
        }
    ]
} 

将有两个选择标记country和state。如何根据所选国家填充州

---

我正在寻找一种类似于row.data返回特定行的数据集的解决方案。

这里有一种非常简单的纯JavaScript方法，可以通过JSON填充两个选择框。在此示例中，状态取决于选择的国家

例如：

HTML:

JavaScript:

试试这个：- HTML:-

JS:-

---

使用AngularJS可以减少代码的大小no？@NicolasCharvozKurzawa-因此添加一个121KB的大型JavaScript库来完成一个简单的JavaScript任务是正确的答案吗？添加121KB是如何减少代码大小的？我说的更多的是关于代码长度的问题对不起。当然这是一个很好的解决方案。但我在考虑重复一遍。只是想得到一个建议。无意冒犯：当然，有一些库可以在几行内完成这项工作，即使jQuery也会大大减少代码块的大小。然而，由于OP显然不太熟悉JavaScript，我更愿意给出纯js的答案。我认为人们应该在使用任何库之前学习JavaScript。从长远来看，这更有帮助。不过这只是我的意见。

<select id="country">
    <option>Country</option>
</select>
<select id="state">
    <option>State</option>
</select>

var d = {
    "data": [
        {
            "country": "USA",
            "states": [
                "Alabama",
                "Alaska",
                "Arizona"
            ]
        },
        {
            "country": "India",
            "states": [
                "TN",
                "AP",
                "Mumbai"
            ]
        }
    ]
}

// First - populate the Country select box from the JSON
for (var i in d.data) {
    var elem = document.createElement("option");
    elem.value = d.data[i].country;
    elem.innerHTML = d.data[i].country;
    document.getElementById("country").appendChild(elem);
}

// Next - add an event handler that will trigger when Country is changed and populate the State box
document.getElementById("country").addEventListener("change", function () {
    document.getElementById("state").innerHTML = "";
    var country = document.getElementById("country").options[document.getElementById("country").selectedIndex].value;
    if (country === "Country") {
        var elem = document.createElement("option");
        elem.value = "State";
        elem.innerHTML = "State";
        document.getElementById("state").appendChild(elem);
    }
    for (var i in d.data) {
        if (d.data[i].country === country) {
            for (var a = 0; a < d.data[i].states.length; a++) {
                var elem = document.createElement("option");
                elem.value = d.data[i].states[a];
                elem.innerHTML = d.data[i].states[a];
                document.getElementById("state").appendChild(elem);
            }
        }
    }
});

<select id="country"></select>
<select id="states"></select>

jQuery(function ($) {
    var input = {
        "data": [{
            "country": "USA",
                "states": [
                "Alabama",
                "Alaska",
                "Arizona"]
        }, {
            "country": "India",
                "states": [
                "TN",
                "AP",
                "Mumbai"]
        }]
    };

    $.each(input.data, function (index, d) {
        $("#country").append("<option value=\"" + d.country + "\">" + d.country + "</option>");
    });

    $("#country").on("change", function () {
        var selectedCountry = $("#country").val();
        var t = $.map(input.data, function (obj) {
            if (obj.country === selectedCountry) return obj;
        });
        if (t.length != 0) {
            $('#states').empty();
            debugger;
            $.each(t[0].states, function (index, d) {
                $("#states").append("<option value=\"" + d + "\">" + d + "</option>");
            });
        }
    });

    $("#country").change();

});