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 once and see how the options are added11
</p> 12
13
</div>14
<div class="row mt-5">15
<p>mdb select to fill:</p>16
</div>17
<div class="row " style="border: 2px solid red;width:400px;">18
<select id="mdbSelect" class="mdb-select md-form w-100" searchable="Search here.." data-stop-refresh="true"> 19
</select>20
<label class="mdb-main-label">Header Select</label>21
</div>22
</div>23
</div>24
<!-- Start your project here-->1
1
xxxxxxxxxx1
function initData(count) {2
console.log("init start");3
var selectId = '#mdbSelect';4
5
$(selectId).materialSelect({ destroy: true });6
$(selectId).empty();7
$(selectId).data('stop-refresh', true);8
9
for (var i = 1; i <= count; i++) {10
var value = 1000000 + i;11
var optionvalue = "Optionvalue to Display -> " + value;12
$(selectId).append(new Option(optionvalue, value));13
};14
15
$(selectId).materialSelect();16
17
console.log("init stop");18
} Console errors: 0