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:

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.

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