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填充两个选择框。在此示例中，State取决于选择的国家/地区。

示例：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);
            }
        }
    }
});

Answer 2

试试这个： - http://jsfiddle.net/ox4ykqoL/

<强> HTML： -

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

<强> JS： -

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();

});

使用json选择组合

2 个答案:

试试这个： - http://jsfiddle.net/ox4ykqoL/