Topic: materialSelect does not show selected value

gianlucagiacometti priority asked 5 years ago


MDB 4.8.0

(with previous versions no problems)

Expected behavior

The selected option is shown

Actual behavior

The selected option is not shown

Resources (screenshots, code snippets etc.)

Just write a simple piece of code like the following and test it (there's no chance to create a Snippet with verison 4.8.0

<div class="md-form">
    <i class="fas fa-venus-mars prefix active" aria-hidden="true"></i>
    <select name="gender" id="profile-form-gender" class="mdb-select colorful-select dropdown-ins" required>
        <option value="" disabled>Gender</option>
        <option value="Female">Female</option>
        <option value="Male" selected>Male</option>
    </select>
    <label class="mdb-main-label">Gender</label>
</div>

<script type="text/javascript" src="/javascripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/bootstrap/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/javascripts/mdbootstrap/mdb.js"></script>
<script>
    $("#profile-form-gender").materialSelect();
</script>

The "Male" selection is not shown. If I click on the dropdown the "Male" option is correctly highlighted.

This bug makes the component unusable.

Any workaround ideas? Thanks


gianlucagiacometti priority answered 5 years ago


You're welcome,

This is the final version including corrections for mdb-select with md-outline.

Please see also my "Little css issue in md-outline" for the complete css connected to this.

jQuery.fn.extend({
    initialiseMaterialSelect: function() {
        return this.each(function() {
            let wrapper = $(this).parent();
            let selected = wrapper.find('select').val() ? wrapper.find('select').find('option:selected').text() : "";
            wrapper.find('.select-dropdown').val(selected).removeAttr('readonly').prop('required', true).addClass('form-control');
            wrapper.find('ul').css('background-color', '#fff');
            if (wrapper.find('select').val()) {
                wrapper.siblings('i.prefix, label').addClass('active');
            }
            else {
                wrapper.siblings('i.prefix, label').removeClass('active');
            }
            if (wrapper.parent().hasClass('md-outline') && wrapper.siblings('i.prefix').length) {
                wrapper.css('padding-left', '2rem');
                wrapper.find('ul').removeClass('w-100');
            }
            wrapper.find('select').on('change', function () {
                if ($(this).val()) {
                    wrapper.siblings('i.prefix, label').addClass('active');
                }
                else {
                    wrapper.siblings('i.prefix, label').removeClass('active');
                }
            });
        });
    }
});

andreprovost3 priority answered 5 years ago


I had the same problem, and this solution worked.

However, i prefer to wait, most probably, you will update your code?


Piotr Glejzer staff commented 5 years ago

Yes, we will. Have a good day.


gianlucagiacometti priority answered 5 years ago


Better solution:

jQuery.fn.extend({
    initialiseMaterialSelect: function() {
        return this.each(function() {
            let wrapper = $(this).parent();
            let selected = wrapper.find('select').val() ? wrapper.find('select').find('option:selected').text() : "";
            wrapper.find('.select-dropdown').val(selected).removeAttr('readonly').prop('required', true).addClass('form-control');
            wrapper.find('ul').css('background-color', '#fff');
            if (wrapper.find('select').val()) {
                wrapper.siblings('i.prefix, label').addClass('active');
            }
            else {
                wrapper.siblings('i.prefix, label').removeClass('active');
            }
            wrapper.find('select').on('change', function () {
                if ($(this).val()) {
                    wrapper.siblings('i.prefix').addClass('active');
                }
                else {
                    wrapper.siblings('i.prefix').removeClass('active');
                }
            });
        });
    }
});

And initialise like this:

    $(".mdb-select").materialSelect();
    $(".mdb-select").initialiseMaterialSelect();

fmaeseele pro commented 5 years ago

Thank you for this workaround. This has finally solved the item selection after a form reset. This multipleselect component is very far away from being usable. I also had to fix the save button disapearing after a form reset (causing the select to init again)


Bartłomiej Malanowski staff commented 5 years ago

@gianlucagiacometti thank you for sharing a workaround with us


gianlucagiacometti priority answered 5 years ago


Ok I found the solution.

The initialisation must be done this way:

    $(".mdb-select").materialSelect();
    $(".mdb-select.select-wrapper").each(function() {
        let wrapper = $(this);
        let selected = wrapper.find('select').val() ? wrapper.find('select').children('option:selected').text() : "";
        wrapper.find('.select-dropdown').val(selected).removeAttr('readonly').prop('required', true).addClass('form-control');
        wrapper.find('ul').css('background-color', '#fff');
        wrapper.find('select').on('change', function () {
            if ($(this).val()) {
                wrapper.siblings('i.prefix').addClass('active');
            }
            else {
                wrapper.siblings('i.prefix').removeClass('active');
            }
        });
        if (wrapper.find('select').val()) {
            wrapper.siblings('i.prefix, label').addClass('active');
        }
        else {
            wrapper.siblings('i.prefix, label').removeClass('active');
        }
    });

Please update your code :-)



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No