Manually trigger items reload (when using ajax/load)

[jamesst20]

Hi.

Let's consider the following exemple:

I have 2 dropdowns and the options in the 2nd dropdown depends on the choice of the 1st dropdown. In a setup where results are loaded by Ajax, how would I retrigger a reload of the second dropdown when I pick a new option in the first one ?

Leaving a code snippet for the demo

    const baseUrl = elem.dataset.url;
    const extraField = document.querySelector(elem.dataset.extraField);
    const extraFieldName = (() => {
      if (!extraField) return;

      return extraField.name.substring(extraField.name.indexOf('[') + 1, extraField.name.length - 1);
    })();

    const ts = new TomSelect(elem, {
      ...(elem.getAttribute("multiple") ? config_multiple : config_simple),
      labelField: 'text',
      valueField: 'value',
      searchField: 'text',
      preload: true,
      load: (query, callback) => {
        const extraFieldParams = extraFieldName ? `&${extraFieldName}=${extraField.value}` : '';
        const url = `${baseUrl}?qs=${encodeURIComponent(query)}${extraFieldParams}`;
        fetch(url)
            .then(response => response.json())
            .then(json => {
              callback(json.items);
            }).catch(()=>{
          callback();
        });
      }
    });

[jamesst20]

Answer

document.querySelector('#firstSelect').addEventListener('change', function () {
        console.log(this.value);
        secondSelect.clear();
        secondSelect.clearOptions();
        secondSelect.load('');
    });

[oyejorge]

Nice!