如何根据多筛选器选择在页面上对 JSON 数据进行分组和显示？

问：

我目前有 3 个选择框多重过滤器，它们从 JSON 文件中提取数据。我需要该页面根据筛选器的选择显示所有相关的 JSON 数据。例如，在选择国家/地区、省/自治区/直辖市

[HTML全文]

<div class="container" style="width:600px;">
    <select name="country" id="country" class="form-control input-lg">
        <option value="">Select country</option>
    </select>
    <br />
    <select name="state" id="state" class="form-control input-lg">
        <option value="">Select state</option>
    </select>
    <br />
    <select name="city" id="city" class="form-control input-lg">
        <option value="">Select city</option>
    </select>
</div>

JS系列

$(document).ready(function() {

load_json_data('country');

function load_json_data(id, parent_id) {
    var html_code = '';
    $.getJSON('./data/country_state_city.json', function(data) {

        html_code += '<option value="">Select ' + id + '</option>';
        $.each(data, function(key, value) {
            if (id == 'country') {
                if (value.parent_id == '0') {
                    html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                }
            } else {
                if (value.parent_id == parent_id) {
                    html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                }
            }
        });
        $('#' + id).html(html_code);
    });

}

$(document).on('change', '#country', function() {
    var country_id = $(this).val();
    if (country_id != '') {
        load_json_data('state', country_id);
    } else {
        $('#state').html('<option value="">Select state</option>');
        $('#city').html('<option value="">Select city</option>');
    }
});
$(document).on('change', '#state', function() {
    var state_id = $(this).val();
    if (state_id != '') {
        load_json_data('city', state_id);
    } else {
        $('#city').html('<option value="">Select city</option>');
    }
});

});

JSON格式

[
 {
  "id":"1",
  "name":"USA",
  "parent_id":"0"
 }, 
 {
  "id":"2",
  "name":"Canada",
  "parent_id":"0"
 }, 
 {
  "id":"3",
  "name":"Australia",
  "parent_id":"0"
 }, 
 {
  "id":"4",
  "name":"New York",
  "parent_id":"1"
 }, 
 {
  "id":"5",
  "name":"Alabama",
  "parent_id":"1"
 }, 
 {
  "id":"6",
  "name":"California",
  "parent_id":"1"
 }, 
 {
  "id":"7",
  "name":"Ontario",
  "parent_id":"2"
 }, 
 {
  "id":"8",
  "name":"British Columbia",
  "parent_id":"2"
 }, 
 {
  "id":"9",
  "name":"New South Wales",
  "parent_id":"3"
 }, 
 {
  "id":"10",
  "name":"Queensland",
  "parent_id":"3"
 }, 
 {
  "id":"11",
  "name":"New York city",
  "parent_id":"4"
 }, 
 {
  "id":"12",
  "name":"Buffalo",
  "parent_id":"4"
 }, 
 {
  "id":"13",
  "name":"Albany",
  "parent_id":"4"
 }, 
 {
  "id":"14",
  "name":"Birmingham",
  "parent_id":"5"
 }, 
 {
  "id":"15",
  "name":"Montgomery",
  "parent_id":"5"
 }, 
 {
  "id":"16",
  "name":"Huntsville",
  "parent_id":"5"
 }, 
 {
  "id":"17",
  "name":"Los Angeles",
  "parent_id":"6"
 }, 
 {
  "id":"18",
  "name":"San Francisco",
  "parent_id":"6"
 }, 
 {
  "id":"19",
  "name":"San Diego",
  "parent_id":"6"
 }, 
 {
  "id":"20",
  "name":"Toronto",
  "parent_id":"7"
 }, 
 {
  "id":"21",
  "name":"Ottawa",
  "parent_id":"7"
 }, 
 {
  "id":"22",
  "name":"Vancouver",
  "parent_id":"8"
 }, 
 {
  "id":"23",
  "name":"Victoria",
  "parent_id":"8"
 }, 
 {
  "id":"24",
  "name":"Sydney",
  "parent_id":"9"
 }, 
 {
  "id":"25",
  "name":"Newcastle",
  "parent_id":"9"
 }, 
 {
  "id":"26",
  "name":"City of Brisbane",
  "parent_id":"10"
 }, 
 {
  "id":"27",
  "name":"Gold Coast",
  "parent_id":"10"
 }
]