Select Option Cascading Dropdowns

Did it work before? What was your previous version? Please provide a snippet that demonstrates the problem.

1) It did work before.

2) The last version I was using was v8.2.0. I had added the original Bootstrap so that I could retain the clean/responsive look.

3) Most of this was server-side. There are 3 select elements, #country, #state, and #city. When the user selects from select#country, the select#state gets filled. When the user selects from the select#state, the select#city gets filled.

Here is the JavaScript I have that populates the next dropdown.

const fetchstatesURL = '/fetch-states.php',
  fetchcitiesURL = '/fetch-cities.php',
  fetchAndPopulate = (url, formData, selectElement) => {
    fetch(url, { method: 'POST', body: formData })
      .then(resp => resp.text())
      .then(data => {
        selectElement.innerHTML = data;
      });
  },
  onChangeCountrySelect = (countrySelect, stateSelect, citySelect) => {
    countrySelect.addEventListener('change', () => {
      const cntryID = countrySelect.value,
        formData = new FormData();
      formData.append('cntryid', cntryID);
      fetchAndPopulate(fetchstatesURL, formData, stateSelect);
      if (stateSelect.querySelectorAll('option').length == 1) {
        fetchAndPopulate(fetchcitiesURL, formData, citySelect);
      } else {
        citySelect.innerHTML = '<option value="" disabled hidden selected></option>';
      }
    });
  },
  onChangeAdminareaSelect = (stateSelect, citySelect) => {
    stateSelect.addEventListener('change', () => {
      const stateID = stateSelect.value,
        formData = new FormData();
      formData.append('stateid', stateID);
      fetchAndPopulate(fetchcitiesURL, formData, citySelect);
    });
  };

And to call the functions;

const sels = {
  country: document.getElementById('country'),
  state: document.getElementById('state'),
  city: document.getElementById('city')
};
onChangeCountrySelect(sels.country, sels.state, sels.city);
onChangeAdminareaSelect(sels.state, sels.city);

We do not support using our package with Bootstrap.

However, this is probably not the cause of this problem. Unfortunately, in 9.0.0 we introduced a bug that prevents the select component from updating visually after you change its HTML after initialisation.

We do not support using our package with Bootstrap.

I am aware of that. I had to add Bootstrap as a quick fix so I can keep the clean look. I did say that.

2) The last version I was using was v8.2.0. I had added the original Bootstrap so that I could retain the clean/responsive look.

To retain the functionality, this look is with the fix where I added Bootstrap.

If I wanted to retain functionality, without adding Bootstrap. Part of my form would look like this.

I commented out everything from MDB to get BS to work with the select fields.

<!-- <select id="regAdminarea1" name="adminarea1" required data-mdb-select-init data-mdb-filter="true" aria-required="true"> -->
<select class="form-select" id="regAdminarea1" name="adminarea1" required aria-required="true">
  <option value="" disabled hidden selected>Select Country First</option>
</select>
<!-- <label for="regAdminarea1" class="form-label select-label">State</label> -->

And -

in 9.0.0 we introduced a bug

I did ask in my original message.

Is this a v9.0.0 bug?