Topic: Select Migration from Material Design for Bootstrap 4
Good morning,
We are migrating from Bootstrap 4 to version 5. We have integrated multiple selectors within modals that are loaded in real time on the web by ajax (They do not exist in the code).
In the previous version, once we loaded the modal, we used the following code to initialize ALL the MDB selectors;
$(document).ready(function(){$(\'#modal-form .mdb-select\').materialSelect();});
How should we currently do it with the latest version of MDB? In the documentation we have only seen the API section with initialization to a specific select.
Another use case we have to migrate. Before, using jquery, we could destroy a select, fill it with options and initialize it again, how would it be done now?
$('ID').materialSelect({ destroy: true });
$('ID').empty();
$('ID').append(OPTIONS);
$('ID').materialSelect({});
Thanks for the help
To init all components on the page you can use code like this:
document.querySelectorAll('.select').forEach((selectEl) => {
const instance = mdb.Select.getOrCreateInstance(selectEl)
})
If you want to add new options to select this snippet can be helpful: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4807594#js-tab-view In this example only new options are added, but all you have to do is add code in it that will remove the old options
hyliacom pro premium commented a year ago
Thank you very much Grzegorz Bujański,
With the first tests we could not make it work. But after a few changes the indications you have given us now work correctly.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.4.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No