Topic: Refresh Material Select with new options based on changes in another field

AJEsler2019 priority asked 4 years ago

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

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:

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

Tomek Makowski staff answered 4 years ago


First issue will be repaired in next release.

In second issue you just initialize materialSelect in wrong place. Here is the solution


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.18.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes