materialSelect does not show selected value

Topic: materialSelect does not show selected value

gianlucagiacometti pro premium priority asked 6 years ago

1 0

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

Add comment

gianlucagiacometti pro premium priority answered 6 years ago

1 0 Best answer

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');
                }
            });
        });
    }
});

Add comment

gianlucagiacometti pro premium priority answered 6 years ago

2 0 Best answer

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 6 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 pro premium commented 6 years ago

@gianlucagiacometti thank you for sharing a workaround with us

Add comment

gianlucagiacometti pro premium priority answered 6 years ago

1 0 Best answer

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 :-)

Add comment

andreprovost3 pro premium priority answered 6 years ago