xxxxxxxxxx
1
<select data-mdb-select-init data-mdb-filter="true" id="mySelect">
2
<option value="1">One</option>
3
<option value="2">Two</option>
4
<option value="3">Three</option>
5
<option value="4">Four</option>
6
<option value="5">Five</option>
7
<option value="6">Six</option>
8
<option value="7">Seven</option>
9
<option value="8">Eight</option>
10
<option value="9">Nine</option>
11
<option value="10">Ten</option>
12
</select>
1
1
xxxxxxxxxx
1
const selectEl = document.querySelector('#mySelect');
2
const selectId = selectEl.id;
3
4
let selectInstance = mdb.Select.getInstance(selectEl);
5
6
const addNewOption = (option) => {
7
selectInstance.dispose();
8
9
const newOption = document.createElement('option');
10
newOption.value = option;
11
newOption.text = option;
12
newOption.selected = true;
13
selectEl.add(newOption);
14
15
selectInstance = new mdb.Select(selectEl);
16
}
17
18
19
selectEl.addEventListener('close.mdb.select', (e) => {
20
const selectWrapper = document.querySelector(`#select-dropdown-container-${selectId}`);
21
22
if (selectWrapper.querySelector('.select-no-results')) {
23
const searchValue = selectWrapper.querySelector('.select-filter-input').value;
24
selectEl.addEventListener('closed.mdb.select', () => {
25
addNewOption(searchValue)
26
}, {once: true})
27
}
28
})
29
Console errors: 0