Dynamically update options in a select component

Topic: Dynamically update options in a select component

eugenemartinza free asked 5 years ago

Hi Team,

I have the code snippet below wherein I'm dynamically populating and selecting options in a select component. Both objectives work, but the component is not changing its view to the selected option on the HTML Page.

What's weird is that I can see the correct option is selected (in the code) when I look at the Chrome Debug Console, but the HTML view itself is not showing the selected option.

Am I missing a refresh or something and if so, how do I refresh the select component

Thanks.

Resources (screenshots, code snippets etc.)

HTML Code Document Type

JS Code: $(document).ready(function () { $('.mdb-select').material_select(); });

Add comment

Sebastian Kaczmarek staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

I can see that you use an outdated version of our package. Please upgrade to the latest 4.8.11 version, on which I have built the same snippet for you: https://mdbootstrap.com/snippets/jquery/s-kaczmarek/1394206

Demo:

So as you can see, the select has preselected option as expected

Add comment

eugenemartinza free answered 5 years ago

0 0 Best answer

Thanks Sebastian,

Upgrading to 4.8.11 resolved the issue.

Cheers.

Add comment

eugenemartinza free answered 5 years ago

0 0 Best answer

<p>Hi Sebastian,</p>

<p>Thanks for getting back to me. I've stripped the HTML to its bare minimum and the results are still the same. I created a Code Snippet but I'm not sure where to point to to get the the CDN for MDB Pro, but here is the Code Snippet link anyway: <a href="https://mdbootstrap.com/snippets/jquery/eugenemartinza/1390579" target="_blank">https://mdbootstrap.com/snippets/jquery/eugenemartinza/1390579</a></p>

<p>I expect the option that I selected in the code, <em>Proof of Residence Verified</em>, to be displayed on screen, but it is not, it displays the label of the Select. Below is the full HTML. Please can you point to your local copies of the included libraries. Looking forward to you response.</p>

<p>------------------------------ HTML Code Starts ------------------------------
</p>

<p>
    
        Test Application</p>

<pre class="prettyprint"><code>    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mdb.css"/>
</head>
<body>
    <main>
        <div class="container">
            <div class="row text-center">
                <div class="col-12">
                    <select class="mdb-select md-form" id="documentStatus">
                        <option value="NOT">Not Compliant</option>
                        <option value="IDN">Id Number Verified</option>
                        <option value="IDD">Id Document Verified</option>
                        <option value="POR" selected="selected">Proof of Residence Verified</option>
                        <option value="FUL">Fully Compliant</option>
                    </select>
                    <label class="mdb-main-label" for="documentStatus">Document Status</label>
                </div>
            </div>
        </div>
    </main>

Please insert min. 20 characters.

Hi Sebastian,

Thanks for getting back to me. I've stripped the HTML to its bare minimum and the results are still the same. I created a Code Snippet but I'm not sure where to point to to get the the CDN for MDB Pro, but here is the Code Snippet link anyway: https://mdbootstrap.com/snippets/jquery/eugenemartinza/1390579

I expect the option that I selected in the code, Proof of Residence Verified, to be displayed on screen, but it is not, it displays the label of the Select. Below is the full HTML. Please can you point to your local copies of the included libraries. Looking forward to you response.

------------------------------ HTML Code Starts ------------------------------

Test Application

    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mdb.css"/>
</head>
<body>
    <main>
        <div class="container">
            <div class="row text-center">
                <div class="col-12">
                    <select class="mdb-select md-form" id="documentStatus">
                        <option value="NOT">Not Compliant</option>
                        <option value="IDN">Id Number Verified</option>
                        <option value="IDD">Id Document Verified</option>
                        <option value="POR" selected="selected">Proof of Residence Verified</option>
                        <option value="FUL">Fully Compliant</option>
                    </select>
                    <label class="mdb-main-label" for="documentStatus">Document Status</label>
                </div>
            </div>
        </div>
    </main>

    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/mdb.js"></script>

    <script language="javascript">
        $(document).ready(function () {
            $('.mdb-select').materialSelect();
        });
    </script>
</body>

------------------------------ HTML Code Ends ------------------------------

Add comment

Sebastian Kaczmarek staff answered 5 years ago

0 0 Best answer

Please post the full reproducible example. You can use our Snippets tool for that. Also, please note that the .material_select() syntax is no longer supported, you have to use .materialSelect() call to initialize Material Select.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.8.4
Device: Desktop
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

eugenemartinza

50Support score
2Questions 4Answers 1Snippets