Question

我正在尝试从基于用户选择的选项的JSON文件加载数据。我有它工作，但我知道它可以写得更有效率，我很难找到一个好的起点。我将在下面列出我的代码示例，但它会根据您选择的状态拉入各个县。您会注意到我正在使用else if语句检查每个值以加载正确的数据。我确信必须有一种方法来加载我需要的东西，但没有其他49个其他if语句。

HTML：

<select id='test-select'>
    <option>AL</option>
    <option>AK</option>
    <option>AZ</option>
</select>

JS：

var cities = [];
    $.getJSON('/assets/shared/misc/counties.json', function(json) {
        // push json to data to cities array
        cities.push(json);

        // map over each item item 
        $('.state-names').map(function(index) {

            // load in json data based off of select option
            $('#test-select').on('change', function() {
                var target = $('#test-select option:selected').val();
                console.log(target);
                if (target == 'AL') {
                    $('.state-names').text(cities[0].AL);
                } else if (target == 'AK') {
                    $('.state-names').text(cities[0].AK);
                } else if (target == 'AZ') {
                    $('.state-names').text(cities[0].AZ);
                } else if (target == 'AR') {
                    $('.state-names').text(cities[0].AR);
                } // end else if block
            }); // end test select function
        }); // end map function

        console.log(cities);

    }); // end getJSON call

这只是精简版本，但它基本上加上更多选项，如果是的话。有没有办法我可以以某种方式设置索引到任何选择的状态，以匹配JSON文件中的键，而不必进行如此多的调用？任何帮助是极大的赞赏。如果我遗漏任何重要细节，我当然可以分享更多信息。谢谢你们。

Answer 1

您只需使用target的值作为属性名称：

$('.state-names').text(cities[0][target]);

请参阅Access / process (nested) objects, arrays or JSON

根据select选项值将JSON数据加载到div中

1 个答案: