How to reset dropdown that has values dynamically added

I have created a custom javascript function to repopulate another select based on the selected value of another select.

In my use case, I select a value from a dropdown called 'district' and, based on on district, it retrieves all 'zone' values for that district in a zone dropdown.

I have successfully worked out the javascript function to repopulate zone select based on district value selected but cannot properly overwrite div with class="menu transition hidden" that overwrites my select. Is there a function I can use to reset that overwrite?

after you rebuild the "Select" element, use this code to rebuild it:

Nui.Dropdown.getInstance(select_element).init();

if this does not work, then let me know and I will add a function for that in the next update or so

Much appreciated Max ... I've tried but to no avail, keep getting 'Uncaught TypeError: Cannot read properties of undefined (reading 'init')' ... Just to be clear, select_element should be replaced with select id or name?

No, select_element should be replaced with the HTML Element object:

document.querySelector("select")

but of course your selector should be more specific like select#id