Topic: Update Multi-Select values fails cosmetically

cdenby pro asked 3 years ago

Expected behavior When I update the selected values using javascript, I expect that the display reflects the change.

Actual behavior It appears that the multi-select only reflects changes made on the wrapper controls - not programmatically changed selections.

Resources (screenshots, code snippets etc.)

This snippet shows that the select is actually being updated, but the appearance of the mdb multi select is remaining unchanged. What needs to be done in this scenario?

cdenby pro commented 3 years ago

It looks like after changing selected options using javascript, we might have to employ: $('.mdb-select').materialSelect({destroy: true}); $('.mdb-select').materialSelect(); in order to rebuild the entire thing. Is there a better way?

cdenby pro commented 3 years ago

The problem is that when we do that, the rebuild shuts the multi-select down prematurely and if you want to choose another option, you have to open it up again.

cdenby pro commented 3 years ago

The problem is that I'm altering the select list based on what the user is selecting in the list itself - so any clicking while it's open requires a rebuild (potentially). That closes it.

Marcin Luczak staff answered 3 years ago


Because the Material Multiselect component overwrites a standard select component, each programmatic change to the root of the standard select needs proper initialization of the Material Multiselect. That is why every change to the Multiselect made by the code and not the user itself needs destroy/rebuild functionality.

Another possibility is to manually change the UI of the Multiselect after the dynamic programmatic change is done, but this will lead you to manually changing classes, aria-attributes of the changed select option, and also a label::before style to remove the 'tick' marker.

Last what comes to my mind is to also dynamically trigger the click event on the element you want to change which will work just as the user click. This is some custom functionality and you would have to try it yourself to keep track of the state of the Multiselect changed this way. Please see my snippet for that:

Best, Marcin

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: PC
  • Browser: Chrome
  • OS: W10
  • Provided sample code: No
  • Provided link: Yes