0

我想将 API 结果中的“食物名称”更改为下拉菜单。当我从“食物名称”（来自 API 结果）中选择一个值时，“服务”下拉列表中会填充选项。

工作 - 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>
4

1 回答 1

0

我明白了，我使用了这个下拉菜单：

<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');
            });
        
    }
});
于 2021-02-09T13:45:49.227 回答