Dynamic Dropdown with remote content

Hi, I wrote my code like that

      $('.dropdown#brands')
        .dropdown({
          apiSettings: {
            url: 'https://sneakerfans.herokuapp.com/api/v1/allbrands',
          },
          fields: {
            remoteValues: 'brands',
            name: 'brand_name',
            value: 'id'
          },
          allowReselection: 'ture',
          placeholder: 'select brands',
          direction: 'downward',
          onChange: (value, text, $choice) => {
            regvue.brand_id = value
            if (!regvue.tech) {
              regvue.tech = true
            }
            $('#techs')
              .dropdown({
                placeholder: 'select techs',
                fields: {
                  remoteValues: 'techs',
                  name: "tech_name",
                  value: "id"
                },
                apiSettings: {
                  url: 'https://sneakerfans.herokuapp.com/api/v1/gettechs',
                  method: 'post',
                  beforeSend: (settings) => {
                    console.log(regvue.brand_id)
                    $('#techs').dropdown('refresh')
                    settings.data = {
                      brand_id: regvue.brand_id,
                    }
                    return settings
                  }
                }
              });
          }
        });

There should be two dropdowns, first use api to get content from server, and when first dropdown change its value, the second dropdown use api and the value from first dropdown to get a different options.

However, the second dropdown content doesn’t change when I change first dropdown value.

[kmd1970]

As of 2.2.9 you should be able to do this like below. No sessionStorage.removeItem should be needed. Also, I use class selectors instead of ids, looks cleaner.

Now, once you click inside the techs field it should display the correct filtered options based on the brands selection.

$('.ui.dropdown.techs').dropdown({
                filterRemoteData : true,
                placeholder: 'select techs',
                fields: {
                  remoteValues: 'techs',
                  name: "tech_name",
                  value: "id"
                },
             apiSettings: {
                  url: 'https://sneakerfans.herokuapp.com/api/v1/gettechs?brand_id={brand_id}',
                  method: 'get',
                  beforeSend: (settings) {
                   // get the brands selected value
                    var brand_id = $('.ui.dropdown.brands').dropdown('get value');
                    settings.urlData.brand_id = brand_id: 
                    return settings
                  }
            }
 });

$('.ui.dropdown.brands').dropdown({
          apiSettings: {
            url: 'https://sneakerfans.herokuapp.com/api/v1/allbrands',
          },
          fields: {
            remoteValues: 'brands',
            name: 'brand_name',
            value: 'id'
          },
          allowReselection: 'true',
          placeholder: 'select brands',
          direction: 'downward',
          onChange: (value, text, $choice)  {
            // clear the techs dropdown
            $('.ui.dropdown.techs').dropdown('clear');
           //2.2.9 currently has a bug where the search value doesn't clear.
           $('.ui.dropdown.techs').find('.search').val('');
          }
});

[rlopezb]

Use: $('#drop').dropdown('change values',null); The next click will in #drop will trigger the query…