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

Question

我试图从基于用户选择的选项的JSON文件加载数据。我有它的工作，但我知道它可以写得更有效率，我很难找到一个好地方开始。我将在下面列出一个我的代码示例，但它会根据您选择的状态在各个县拉动。你会注意到，尽管我正在使用else 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