Topic: mdb-select not setting ACTIVE class for selected option

szq pro asked 6 years ago

On page load, the form displays the previous selected item - ie the :selected item is displayed, but the .active class is NOT being set on the constructed
    option. So when you click to change the selected option it is not possible to see what was previously selected. Maybe there is something wrong with my markup but I can't find it. Or is there something wrong in the mdb-select javascript??

Adrian Sawicki free answered 5 years ago

Hello Detiege Guillaume, Thanks for your answer solving the problem of szq.

transpera pro commented 4 years ago

This still appears to be the case in the current build. When you init the $('#').material_select() it doesn't automatically set the '.active' class on the current selected item. Functionality isn't affected, but ux is since there's no initial indication on the dropdown of which item is currently selected on init.

harc pro answered 5 years ago

MDB team - first, thanks for a great product... I concur there is an issue here as reported above; at load the selected value does pre-fill into the label for the select drop down, however it's corresponding option lacks the "active selected" class definitions which give the selected option the highlight/background color when the list is opened. When a page is loaded and the drop down is opened by user, all options appear unselected, which is an unusual experience. I first attempted to resolve by adding the css classes "active selected" to my selected option, but that was not carried into the
  • that is rendered due to the mdb.js code that yields the options. Rather than adjust this with after the fact javascript, I looked into the mdb.js source code and found that css classes for options are not being included by the code that renders the select component; I modified as follows - perhaps the dev team will want to include in a future patch - other developers are welcome to also benefit of course.
    // 05.09.2017 - Michael Harclerode (aka Harc)
    // mdb.js - original source lines were 10093 - 10107
    // Harc modification to below if statement block;
    // the original code wasn't allowing including carry of defined css class for an option
    // (I also reduce unnecessary waste of outputting "class" strings if there are no classes)
    // ---- BEGIN Harc modification section
    if (!classes) classes = ''
    // Check for multiple type.
    if (type === 'multiple') {
      if (classes || !!disabledClass) {
          options.append($('<li class="' + disabledClass + classes + '"><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'))
      else {
          options.append($('<li><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'))
    else {
      if (classes || !!disabledClass) {
          options.append($('<li class="' + disabledClass + classes + '"><span>' + option.html() + '</span></li>'))
      else {
          options.append($('<li><span>' + option.html() + '</span></li>'))
    // -- END Harc modification for code block

  • detiege guillaume free answered 6 years ago

    Same thing happened to me, we can't set selected option, because active is missing, You must add this in the javascript :
    var activateOption = function (collection, newOption, firstActivation) {
                if (newOption) {
                    var option = $(newOption);
                    option.addClass('selected active'); /*Here Add active*/
                    if (!multiple || !!firstActivation) {

    Adrian Sawicki free answered 6 years ago

    Hello, Could you show me your code? Regards, Adrian

    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