Question

我正在尝试制作一个显示JSON API数据的HTML表单，但是我需要将data-display键设置为一个变量，因为我将使用两个依赖的下拉列表，并且必须记录从第一个列表，并将其值用作第二个列表的数据显示键。

html：

<form>
      <div class="form-group">
      <label for="client">Select payment</label>
      <select 
      class="form-control" 
      name="payment" 
      id="payment" 
      data-source="https://sheetdb.io/api/v1/ptnaed3a6a4nr" 
      data-displayKey="Client_Name">
      </select>
    </form>

JS：

 $('select[data-source]').each(function select() {
  var $select = $(this);

  $select.append('<option></option>');

  $.ajax({
    url: $select.attr('data-source'),
  }).then(function select(options) {
    options.map(function select(option) {
      var $option = $('<option>');

      $option
        .text(option[$select.attr('data-displayKey')]);

      $select.append($option);
    });
  });
});

Answer 1

我看到您正在使用JQuery，可以使用

$.getJSON( "url", function( data ) {
    var items = [];
    $.each( data, function( key, val ) {
         items.push( "<option value='" + key + "'>" + val + "</option >" );
    });
    $( "<selector>", {
       "class": "my-new-list",
        html: items.join( "" )
        }).appendTo( "selector" );
     });

有关更多信息，请检查此网址1

如何可变地将数据显示键设置为来自JSON API

1 个答案: