Topic: Active Class missing from material select form

developers pro asked 6 years ago

I have a select that gets created in the html of my page, with the options being populated from a DB call, then calling material_select on the select. The issue is that when those forms are populated it correctly displays the active option from the DB, but the active class is not placed on the displayed li element, preventing me from being able to target the li that's supposed to be active. if I click on the select and don't change anything then the active class is properly added, but triggering a click, mousedown, or mouseup don'est take care of the issue either. Issue What's going on here?

Rafał Rogulski free answered 5 years ago

Hi, Thanks jkilbride. Your code works perfectly. We will fix this in next release. Regards

jkilbride free answered 5 years ago

Hi, I use server side React to create my pages. In most cases, I am pulling the data for my selects from a database and dynamically setting the selected options. On the client side, I use the normal MDB code to initialize the selects: $('.mdb-select').material_select(); However, with single (not multiple) value selects, the initially selected option is not being displayed correctly in the MDB dropdown list. So, I use the code above to add the missing classes to the correct item in the dropdown. Thanks!

Rafał Rogulski free answered 5 years ago

Hi Can you describe how you initialize material select? Regards

jkilbride free answered 5 years ago

I use the following code to find the selected value and add the active and selected classes to the matching list element when the page loads:
$('select').not('[multiple]').each(function() {
    var $this = $(this);
    var selectedFilter = ':contains("' + $this.children(':selected').text()  + '")';
    $this.siblings('').children(selectedFilter).eq(0).addClass('active selected');
The multiple value selects seem to work fine. It's only the single value selects I have a problem with.

jtangel3 pro answered 5 years ago

has this been fixed?

We'll fix this. It's already on my TODO list

Please insert min. 20 characters.


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


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No