Topic: Select with new options - dispose removes label
Hi, I need to change the options of a select dynamically. So I read here, that I need to dispose() the select and create a new instance. That is working:
var productSelect = document.getElementById('product'); var productSelectInstance = select.getInstance(productSelect); productSelectInstance.dispose(); $('#product').html(data.products); productSelect = document.getElementById('product'); productSelectInstance = new select( productSelect);
I'm using the label feature of the select:
<label class="form-label select-label">Example label</label>
The problem is, that dispose() will also remove the label and so after creating a new select() the label is not there anymore.
Any idea to fix this? Instead of disposing and creating a new select, I know from similar components a refresh() method. Maybe this is an idea to fix the problem with the label.
Best regards, Tobias
If someone needs a workarround until the team solved this bug / behavior:
var backup = document.getElementById('productLabel'); //save the Label as backup var productSelect = document.getElementById('product'); //get the select var productSelectInstance = select.getInstance(productSelect); //get the instance of the MDB select productSelectInstance.dispose(); //remove the MDB select (your select still exists, but label for your select was removed) productSelect.parentNode.insertBefore(backup, productSelect.nextSibling); //insert the saved backup label again to your code $('#product').html(data.products); //change the select options productSelect = document.getElementById('product'); //get your changed select productSelectInstance = new select( productSelect); //create a MDB select with your new options
With this workarround, your select has the new collection of options and still have a label.
Not really the best solution, but a workarround until we have a new MDB version with better behavior regarding changing options or that
dispose() don't removes the label.
Some Ideas from my side:
- Refresh-Method: Instead of Disposing and Creating a new Select, a Refresh method which only updates the current view will help. So it's possible to change existing options, add or remove options and then call refresh() so that the select is updated.
This doesn't help. I need to set a complete new list of options, not just adding new options.
There is no anything like
refresh() in select at the moment. We will check out if
dispose() couldn't do it better. For now you can try this solution:
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Premium
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.1.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No