javascript - 使用 json 进行组合选择

Question

国家和州将以 json 形式发送

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

将有两个选择标签(国家和州)。如何根据所选国家/地区填充州？

我正在寻找类似于 http://www.datatables.net/examples/api/row_details.html 的解决方案其中 row.data() 返回特定行的数据集。

Answer 1

这是一种非常简单的纯 JavaScript 方法，可以通过 JSON 填充两个选择框。在此示例中，“州”取决于选择的国家/地区。

示例:http://jsfiddle.net/wasfd592/

HTML:

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

JSON 对象(分配给变量 d):

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

JavaScript:

// 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);
            }
        }
    }
});