Select with new options - dispose removes label


Topic: Select with new options - dispose removes label

coinsbee pro premium asked 3 years ago

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


coinsbee pro premium answered 3 years ago

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.


mlazaru staff answered 3 years ago

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: https://mdbootstrap.com/snippets/standard/mlazaru/4018324


coinsbee pro premium answered 3 years ago

This doesn't help. I need to set a complete new list of options, not just adding new options.


mlazaru staff commented 3 years ago

Could you paste code sample or snippet? Maybe we could find a better solution.


coinsbee pro premium commented 3 years ago

please check my first post. There is already the complete code sample.


coinsbee pro premium answered 3 years ago

Some Ideas from my side:

  1. 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.
  2. Dispose-Change: Dispose should dispose the select only and not the label. If someone wants to remove also the label, he can do this via JavaScript for example. But dispose() of the select should not remove also the label. With this change of dispose() it's possible to dispose the select, creating a new select and the label of the select is still there.

mlazaru staff commented 3 years ago

Thank you for your ideas, we will consider them.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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
Tags