Worked perfectly. Thanks!

In your example label is not visible on page load due to a dynamically added placeholder, which covers the label. You can fix that in a few ways. The recommended solution from our documentation for that component is to use the disabled active option which will represent your placeholder when no option is selected. Another way, but less recommended is to explicitly add an active class to the label, which will make it visible.

Please see my snippet that shows your issue and possible solutions: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2713040

Regards, Marcin

Thanks Marcin, working great! Quick question, when using with a select label, the label doesn't display when the page is loaded and the value is "". Only after the field is click is it displayed. If there is a value, the label is displayed without issues. Is there any guidance to display the label when the page is loaded and there is no value?

https://mdbootstrap.com/snippets/jquery/randall-eikelboom/2712149/

Hi,

The selected option in your form is not visible on page load because it has been overridden by .val("") in your JavaScript code. Removing that solves the issue.

You can handle 2 or more selects basically by adding another select to your form. This should create two separate instances of the select component.

For both questions please see my snippet based on your code: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2705565

Regards, Marcin

Also, can you provide some guidance if using 2 or more selects within the same form