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/

Answer 2

您需要从名称属性与所选值匹配的json中过滤掉对象。

因此，在更改select时，首先获取所选值，然后使用array.filter属性查找匹配的对象。

从该对象中，您可以获得parameters键包含您需要的所有值

var json = [//.. json objects]

// on change get the selected value
$('#reportName').change(function() {
  /* setting currently changed option value to option variable */
  var option = $(this).find('option:selected').val();
  /* setting input box value to selected option value */
  // Use array filter to get filter out the object
  var getObject = json.filter(function(item) {
   return item.name == option
  });
  // the filtered array will have only one object. So picking 0 index
  // parameters is one of the key
  console.log(getObject[0].parameters)
});

注意：这只是为了说明如何检索所需的值。您仍然需要进行ajax调用以获取json

DEMO

Answer 3

您可以使用jQuery data()函数。使用此data()方法将json数据绑定到每个选择选项。并且仅使用此方法检索。 data()函数使用键和值对来设置值使用此

jQuery("#reportName").data("parameters",v.parameters)

要获取值

jQuery("#reportName").data("parameters")

https://jsfiddle.net/sanjayarakeri/p7thv36u/

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

3 个答案: