xxxxxxxxxx1
<!-- Start your project here-->2
<div>3
<div class="m-5" style="height: 100vh; width:800px;">4
<div class="row mt-5">5
<h2>Test Performance mdbSelect (500 Options ...)</h2>6
</div>7
<div class="row mt-5">8
<input type="button" value="Init Select" onclick="initData(500);"/>9
<p class="ml-5 mt-3">10
Click twice and the performance breaks down and the application needs about 1GB Ram11
</p> 12
</div>13
<div class="row mt-5">14
<p>mdb select to fill:</p>15
</div>16
<div class="row " style="border: 2px solid red;width:400px;">17
<select id="mdbSelect" class="mdb-select md-form w-100" searchable="Search here.."> 18
</select>19
<label class="mdb-main-label">Header Select</label>20
</div>21
</div>22
</div>23
<!-- Start your project here-->1
1
xxxxxxxxxx1
<script>2
3
function initData(count) {4
console.log("init start");5
var selectId = '#mdbSelect';6
7
if($(selectId).hasClass('initialized'))8
{9
$(selectId).material_select('destroy');10
$(selectId).empty(); 11
}12
13
for (var i = 1; i <= count; i++) {14
var value = 1000000 + i;15
var optionvalue = "Optionvalue to Display -> " + value;16
$(selectId).append(new Option(optionvalue, value));17
};18
19
$(selectId).material_select();20
21
console.log("init stop");22
}23
24
</script>25
Console errors: 0