materialSelect does not show selected value

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

Add comment

gianlucagiacometti priority answered 5 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.

<pre class="prettyprint"><code>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');
 }
 });
 });
 }
});
</code></pre>

Please insert min. 20 characters.

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

andreprovost3 priority answered 5 years ago

0 0 Best answer

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.

Add comment

gianlucagiacometti priority answered 5 years ago

2 0 Best answer

Better solution:

<pre class="prettyprint"><code>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');
 }
 });
 });
 }
});
</code></pre>

And initialise like this:

<pre class="prettyprint"><code> $(".mdb-select").materialSelect();
 $(".mdb-select").initialiseMaterialSelect();
</code></pre>

Please insert min. 20 characters.

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

Add comment

gianlucagiacometti priority answered 5 years ago

1 0 Best answer

Ok I found the solution.

The initialisation must be done this way:

<pre class="prettyprint"><code> $(".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');
 }
 });
</code></pre>

Please update your code :-)

Please insert min. 20 characters.

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

Write

Create snippet

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

gianlucagiacometti

308Support score
17Questions 23Answers 1Snippets