如何将数据显示密钥设置为来自 JSON API a 可变

Question

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

.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" );
     });

有关更多信息，请查看此 URL 1