Dynamically update options in a select component


Topic: Dynamically update options in a select component

eugenemartinza 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(); });


Sebastian Kaczmarek staff pro premium answered 5 years ago

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


Sebastian Kaczmarek staff pro premium answered 5 years ago

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.


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


Thanks Sebastian,

Upgrading to 4.8.11 resolved the issue.

Cheers.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: 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