javascript - 如何根据用户选择获取 JSON 中的子值

Question

我有一些动态 JSON 来填充下拉框。如何根据用户选择的值检索参数部分内的所有值。

例如，如果用户选择报告，则应获取startDate 和 endDate 值

第二个示例，如果用户将值更改为 report2，我想获取programid、startDate 和 endDate 值

<select class="form-control" id="reportName">
<option value="">Select</option>
<option value="report">Fees</option>
<option value="balances">Balances</option>
<option value="account"> Account Report</option>
<option value="report2"> Fee</option>
<option value="DI"> DI</option>
<option value="report3">Fees</option>
<option value="Rate_Report">Rate Report</option>
</select>

此代码用于填充下拉框。

$.ajax({
    url: reports,
    dataType: "json",
    //jsonp:"jsoncallback",
     cache: false,
    success: function(data, textStatus, jqXHR) {
        $('#reportName').empty();
        $('#reportName').append($('<option>').text("Select").attr('value', ''));    
        jQuery.each(data, function(k,v) {

               $('#reportName').append($('<option>').text(v.displayName).attr('value', v.name));
         });       
},
    error: function(jqXHR, textStatus, errorThrown) {
        console.log('FAILED to get  JSON from AJAX call' + jqXHR + textStatus + errorThrown);

    }
});      

如何根据用户选择使用 jquery ajax 获取各个参数内的值？

JSON

 [  
       {  
          "name":"report",
          "displayName":" Fees",
          "parameters":[  
             "startDate",
             "endDate"
          ],
          "formats":[  
             "EXCEL"
          ]
       },

       {  
          "name":"report2",
          "displayName":"Fee",
          "parameters":[  
             "programId",
             "startDate",
             "endDate"
          ],
          "formats":[  
             "EXCEL"
          ]
       },
       {  
          "name":"DI",
          "displayName":" DI",
          "parameters":[  
             "institutionId",
             "endDate"
          ],
          "formats":[  
             "EXCEL"
          ]
       },
       {  
          "name":"report3",
          "displayName":"Fees",
          "parameters":[  
             "startDate",
             "endDate",
             "programId"
          ],
          "formats":[  
             "EXCEL"
          ]
       },
       {  
          "name":"Rate_Report",
          "displayName":"Rate Report",
          "parameters":[  
             "balanceDate",
             "programId"
          ],
          "formats":[  
             "EXCEL"
          ]
       }
    ]

Answer 1

您已经很接近了，只是您需要在每个动态添加的元素中添加一个数据参数，并添加一个 onchange 以便在选项值发生更改时获取该数据。我希望这会有所帮助:

您的模拟数据: https://api.myjson.com/bins/15p21r

HTML:

<select class="form-control" id="reportName">
</select>

JavaScript:

$(document).ready(function() {
  $.ajax({
    url: "https://api.myjson.com/bins/15p21r",
    dataType: "json",
    cache: false,
    success: function(data, textStatus, jqXHR) {
      $('#reportName').empty();
      $('#reportName').append($('<option>').text("Select").attr('value', ''));
      jQuery.each(data, function(k, v) {
        $('#reportName').append($('<option>').text(v.displayName).attr('value', v.name).attr('data-params', v.parameters));
      });
      $('#reportName').change(function(){
        selectedValue = $('#reportName option:selected').attr('data-params');
        alert(selectedValue);
      });
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log('FAILED to get  JSON from AJAX call' + jqXHR + textStatus + errorThrown);

    }
  });
});

JSFiddle: http://jsfiddle.net/nikdtu/v38bw9qv/