I need to change the options available in a Material Select dropdown (option data retrieved using an AJAX call - in the snippet a simple for loop) based on a selection made in a different dropdown. I have tried using the code below which is kind of successful with two key issues as outlined below.

A snippet is available at

https://mdbootstrap.com/snippets/jquery/ajesler2019/2163942

Actual behavior

Issue 1 - Each time the user changes the first dropdown, without actually selecting any of the options in the second dropdown, the second dropdown is successfully updated with the data from the AJAX call. However, the html in the browser grows the number of material select divs with each new user selection from the first dropdown and if the first dropdown selection is changed a number of times, the browser becomes very slow. The growth in the browser is visible in the console in the snippet

Issue 2 - If the user selects an option in the second dropdown and then changes the first dropdown (which should update the second dropdown based on the AJAX call - in this case the for loop), the second dropdown will not be updated.

Resources (screenshots, code snippets etc.)

Drawn from the following support ticket:

https://mdbootstrap.com/support/general/material-select-enabledisable-via-javascript/

$('#consumeFrom').materialSelect("destroy"); $("#consumeFrom").removeAttr("disabled"); $("#consumeFrom").materialSelect();