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

I want to change the 'Food name' from API results to a Dropdown. When I select a value from the 'Food name' (which comes from API results), the "Serving" dropdown is populated with options.

Working - API results format:

Working - Fills the "Serving" dropdown:

And this is what I want to obtain:

NOT WORKING - the Serving dropdown is not populated:

The HTML is this:

<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>

This is the javascript for the API (the version that is working):

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();
  }
});

In Semantic UI are two types of dropdowns, I tried with both of them:

Dropdown type 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>

Dropdown type 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>

I got it, I used this dropdown:

<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>

And added this script:

$('.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');
            });
        
    }
});