Topic: Slowness issue with dynamic data in select
I had encountered an slowness issue when updating select1 list several times and selecting select1 item will update the list of items in select2. The slowness issue became worse when I changed the select1 list even more.
I didn't encounter this issue in MDBootstrap 4.5.2. I had upgraded to 4.5.9 as it fixes a few other issues that I had encountered but the 4.5.9 had raised a showstopper issue.
Here's the relevant codes to simulate the slowness issue.
<div class="md-form">
<select id="select1" class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label>Select 1</label>
</div>
<div class="md-form">
<select id="select2" class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label>Select 2</label>
</div>
script
new WOW().init();
$(document).ready(function() {
$('.mdb-select').material_select();
});
$(document).on("change",
"#select1",
function () {
var $select2 = $("#select2");
$select2.material_select('destroy');
$select2.empty();
$select2.append($("<option></option>").attr("value", "").text("Choose one"));
$select2.material_select();
});
Is it completely fixed in 4.5.10? It is a bit better but still slow if I tried to populate the dropdown with 200 items.
new WOW().init();
$(document).ready(function() {
$('.mdb-select').material_select();
});
$(document).on("change",
"#select1",
function () {
var $select2 = $("#select2");
$select2.empty();
$select2.append($("<option></option>").attr("value", "").text("Choose one"));
for (var i = 0; i < 200; i++)
{
var ri = Math.floor(Math.random() * 10);
$select2.append($("<option>Option " + ri + "</option>").attr("value", ri).text("Option " + ri));
}
var $select3 = $("#select3");
$select3.empty();
$select3.append($("<option></option>").attr("value", "").text("Choose one"));
for (var i = 0; i < 200; i++)
{
var ri = Math.floor(Math.random() * 10);
$select3.append($("<option>Option " + ri + "</option>").attr("value", ri).text("Option " + ri));
}
$('.mdb-select').material_select('destroy');
$('.mdb-select').material_select();
});
Anna Morawska staff commented 6 years ago
Hello, thank you for reporting this. I've tried to recreate this, but it looks like everything works fine, but we are definitely going to have a look at it. Best, AniaFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Anna Morawska staff commented 6 years ago
Hello, could you provide us with more details? What exactly do you want to achieve? Best, Annahockchuan free commented 6 years ago
If you try to select item in select1, it will refresh the list of items in select2 and it is working well. Try to select different items in select1 a few times, you can see that the page is getting slower and slower. I continued to select the items in select1 till the page finally becomes unresponsive.Anna Morawska staff commented 6 years ago
Hello, thank you for reporting this bug, we appreciate this. It's already added to our TODO list, we will fix this ass soon as possible. Best, Ania