validation select


Topic: validation select

Randall.eikelboom asked 4 years ago

if one of the options is 'selected' when page is loaded, the placeholder is still being shown ... can this be changed to show the 'selected' option instead of the placeholder?

[https://mdbootstrap.com/snippets/jquery/randall-eikelboom/2702591/](https://mdbootstrap.com/snippets/jquery/randall-eikelboom/2702591/

also, can you provide some guidance when using two or more select on the same form


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


Marcin Luczak staff answered 4 years ago

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


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/


Marcin Luczak staff answered 4 years ago

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


Worked perfectly. Thanks!


Marcin Luczak staff commented 4 years ago

Your welcome, if you have any further questions, please feel free to ask.

Regards, Marcin


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.17.0
  • Device: PC
  • Browser: Safari
  • OS: OS Catalina
  • Provided sample code: No
  • Provided link: No