从 API 结果到影响第二个下拉列表的下拉菜单的过渡 - 语义 UI

Question

我想将 'Food name' 从 API 结果更改为下拉列表。当我 select 来自 'Food name' 的值（来自 API 结果）时，“服务”下拉列表会填充选项。

工作 - API 结果格式：

工作 - 填写“服务”下拉列表：

这就是我想要获得的：

不工作 - 服务下拉列表未填充：

HTML是这样的：

<div class="ui page_log">
  <div class="ui search">
    <div class="ui left icon input">
      <i class="search icon"></i>
      <input class="prompt" type="text" name="food_name" placeholder="Search...">
    </div>
  </div>
</div>

这是API（可用的版本）的javascript：

function page_log() {

  $('.page_log .ui.search')
    .search({
    apiSettings: {
      //url: '/autosuggest_log.php?term={query}'
      url: 'http://www.json-generator.com/api/json/get/cfYMrjahSG?indent=2'
    },
    fields: {
      results: 'results',
      title: 'name',
      id: 'id',
      value: 'value',
      url: false 
    },
    onSelect: function (selected, options) {
      console.log(selected, options);

      $('.ui.dropdown.serving').removeClass('disabled').addClass('loading');

      $.ajax({
        method: "GET",
        //url: "/autosuggest_serv.php?id=" + selected['id']
        url: 'http://www.json-generator.com/api/json/get/ceYmRnmdOW?indent=2'
      })

        .done(function(res) {
        console.log(res);
        $('.ui.dropdown.serving').dropdown('change values', res['results']);
        $('.ui.dropdown.serving').dropdown('set exactly', [ res['results'][0]['value'] ]);
        $('.ui.dropdown.serving').removeClass('loading');
      });

    },
    maxResults: 16,
    minCharacters: 0
  })
  ;

}

$(document).ready(function () {

  if ($('.page_log').length) {
    page_log();
  }
});

在 Semantic UI 中有两种类型的下拉菜单，我都尝试过：

下拉类型 1

<select class="ui dropdown frr">
    <option value="">Fruits T1</option>
    <option value="9205">Oranges</option>
    <option value="9003">Apples</option>
    <option value="9316">Strawberries</option>
</select>

下拉类型 2

<div class="ui selection dropdown frr">
    <input type="hidden" name="fruits">
    <i class="dropdown icon"></i>
    <div class="default text">Fruits T2</div>
    <div class="menu">
        <div class="item" data-value="9205">Oranges</div>
        <div class="item" data-value="9003">Apples</div>
        <div class="item" data-value="9316">Strawberries</div>
    </div>
</div>

Answer 1

我知道了，我使用了这个下拉菜单：

<div class="ui selection dropdown frdd">
    <input type="hidden" name="fruits">
    <i class="dropdown icon"></i>
    <div class="default text">Fruits T2</div>
    <div class="menu">
        <div class="item" data-value="9205">Oranges</div>
        <div class="item" data-value="9003">Apples</div>
        <div class="item" data-value="9316">Strawberries</div>
    </div>
</div>

并添加了这个脚本：

$('.ui.dropdown.frdd').dropdown({
    onChange: function (selected, options) {
        //console.log(selected, options);

        $('.ui.dropdown.serving').removeClass('disabled').addClass('loading');

        $.ajax({
            method: "GET",
            url: "https://www.json-generator.com/api/json/get/ceYmRnmdOW?indent=2"
        })

            .done(function(res) {
                console.log(res);
                $('.ui.dropdown.serving').dropdown('change values', res['results']);
                $('.ui.dropdown.serving').dropdown('set exactly', [ res['results'][0]['value'] ]);
                $('.ui.dropdown.serving').removeClass('loading');
            });
        
    }
});

从 API 结果到影响第二个下拉列表的下拉菜单的过渡 - 语义 UI

Transition from API results to Dropdown that affects a second dropdown - Semantic UI

javascript

semantic-ui

semantic-ui-css