Topic: Update Multi-Select values fails cosmetically
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.) https://mdbootstrap.com/snippets/jquery/cdenby/2839807
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?
Hello,
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: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2841498
Best, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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.