根據選擇選項值將JSON數據加載到div中

我試圖從基於用戶選擇的選項的JSON文件加載數據。我有它的工作，但我知道它可以寫得更有效率，我很難找到一個好地方開始。我將在下面列出一個我的代碼示例，但它會根據您選擇的狀態在各個縣拉動。你會注意到，儘管我正在使用else if語句來檢查每個值以加載正確的數據。我確信必須有一種方法來加載我需要的東西，但是如果沒有其他語句，就可以加載它。根據選擇選項值將JSON數據加載到div中

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文件中的鍵，而不必進行如此多的調用？任何幫助是極大的讚賞。如果我遺漏了任何重要的細節，我當然可以分享更多信息。多謝你們。

來源

2014-09-10 Dan D

您可以簡單地使用的target值作爲屬性名稱：

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

見Access/process (nested) objects, arrays or JSON

來源

2014-09-10 20:16:59

太謝謝你了！這完美，並很容易在那裏編碼。我知道必須有一些我錯過的東西。再次感謝您的幫助。 – 2014-09-10 20:26:03

根據選擇選項值將JSON數據加載到div中

回答

相關問題