Hi vilage,

The problem is your last line of JS code.

$('.mdb-select.select-wrapper .select-dropdown').removeAttr('readonly').prop('required', true).addClass('form-control');

You pick both selects with this line. I fixed this behaviour by inspecting this element and copying the selector to the desired input field. This is not the elegant selector but it surely works in this case:

$('body > form > div:nth-child(1) > div:nth-child(3) > div.select-wrapper.mdb-select.md-form > input')

I forked from your snippet and created ready to use solution}.

You can create a more elegant selector for your needs by for example adding the id to the desired select input field.

Best Regards, Piotr

Hello,

I update the snippet, when we put two selects in the same form, one ir required and other not, this don´t function too. And the searcheable option have a problem.

Is this a problem of the select? Or the construction of the html solve this.

Best, Otavio

Hi,

we also have problem with select validation, and I trie you code snippet. But this don´t work if one element of the list are selected. The component don´t show this.

I fork your code https://mdbootstrap.com/snippets/jquery/vilage/1112410, if you can see this.

We are using label tag for select elements, so i include this too.

Best, Otavio

Hi webdesigna,

I created snipped with an example of a possible solution for your development. I am aware our material select has some problems, but we will fix its behaviour in the future. Right now try my solution:

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/848712

If you need additional help, I am here for you.

Best Regards, Piotr