Topic: Dynamically update options in a select component
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(); });
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
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 ------------------------------
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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