xxxxxxxxxx
1
<div class="card p-4 mt-3 my-2">
2
<div class="card-body">
3
<h5 class="card-title mb-3">SELECT UPDATES</h5>
4
<form enctype="multipart/form-data" method="post" action="/Dev/Test">
5
<div class="form-row">
6
<div class="col-4">
7
<label class="mb-0">Options</label>
8
<select id="upd-select" class="mdb-select">
9
<option value="1">Option 1</option>
10
</select>
11
</div>
12
</div>
13
<div class="d-flex justify-content-center">
14
<button id="add-btn" type="button" class="btn btn-sm btn-primary waves-effect waves-light">Add option</button>
15
</div>
16
<small class="text-muted">After pressing add option the select is updated without calling materialSelect() method again</small>
17
</form>
18
</div>
19
</div>
1
1
xxxxxxxxxx
1
$(document).ready(function(){
2
$(".mdb-select").materialSelect();
3
});
4
5
$("#add-btn").click(function(){
6
$(".mdb-select").materialSelect({destroy: true});
7
let length = $("#upd-select option").length + 1;
8
$("#upd-select").append(new Option("Option " + length, length));
9
//$("#upd-select").materialSelect(); --> function is already called on $.append. Same behaviour using $.html
10
});
Console errors: 0