Skip to content

Commit 3c02e78

Browse files
wuda-iowuda-io
committed
Merge branch 'improved_select' into main
2 parents 06541f3 + cb52a6e commit 3c02e78

File tree

2 files changed

+95
-31
lines changed

2 files changed

+95
-31
lines changed

‎js/select.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,13 @@
255255
li.querySelector('input[type="checkbox"]').checked = !isSelected;
256256
return isSelected;
257257
}
258+
_isOptionChosen(realOption) {
259+
if (realOption.hasAttribute('disabled')) return false;
260+
return realOption.selected || realOption.hasAttribute('selected');
261+
}
258262
_setValueToInput() {
259263
const texts = this._values
260-
.filter((value) => value.el.hasAttribute('selected') && !value.el.hasAttribute('disabled'))
264+
.filter((value) => this._isOptionChosen(value.el))
261265
.map((value) => value.optionEl.querySelector('span').innerText.trim());
262266
// Set input-text to first Option with empty value which indicates a description like "choose your option"
263267
if (texts.length === 0) {
@@ -288,7 +292,7 @@
288292

289293
getSelectedValues() {
290294
return this._values
291-
.filter((value) => value.el.hasAttribute('selected') && !value.el.hasAttribute('disabled'))
295+
.filter((value) => this._isOptionChosen(value.el))
292296
.map((value) => value.el.value);
293297
}
294298
}

‎test/html/select.html

Lines changed: 89 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@
3838
<label>Multi-Select</label>
3939
</div>
4040

41+
<div class="input-field col s12">
42+
<button class="btn1">Get Single-Select Values</button>
43+
<button class="btn2">Get Multi-Select Values</button>
44+
</div>
45+
4146
<div class="input-field col s12">
4247
<select>
4348
<optgroup label="team 1">
@@ -52,35 +57,63 @@
5257
<label>Single-Select with Optgroups</label>
5358
</div>
5459

55-
<div class="input-field col s12 m6">
56-
<select class="icons">
57-
<option value="" disabled selected>Choose your option</option>
58-
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png">example 1</option>
59-
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png">example 2</option>
60-
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png">example 3</option>
61-
</select>
62-
<label>Single-Select with Images (right)</label>
60+
<div class="row">
61+
<h5>Selects with Images</h5>
62+
<div class="input-field col s12 m6">
63+
<select class="icons">
64+
<option value="" disabled selected>Choose your option</option>
65+
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png">example 1</option>
66+
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png">example 2</option>
67+
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png">example 3</option>
68+
</select>
69+
<label>Single-Select with Images (right)</label>
70+
</div>
71+
<div class="input-field col s12 m6">
72+
<select class="icons">
73+
<option value="" disabled selected>Choose your option</option>
74+
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png" class="left">example 1</option>
75+
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png" class="left">example 2</option>
76+
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png" class="left">example 3</option>
77+
</select>
78+
<label>Single-Select with Images (left)</label>
79+
</div>
6380
</div>
6481

65-
<div class="input-field col s12 m6">
66-
<select class="icons">
67-
<option value="" disabled selected>Choose your option</option>
68-
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png" class="left">example 1</option>
69-
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png" class="left">example 2</option>
70-
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png" class="left">example 3</option>
71-
</select>
72-
<label>Single-Select with Images (left)</label>
82+
<div class="row">
83+
<h5>Select with selected Options</h5>
84+
<div class="input-field col s12 m6">
85+
<select>
86+
<option value="" disabled>Choose your option</option>
87+
<option value="1">Option 1</option>
88+
<option value="2" selected>Option 2</option>
89+
<option value="3">Option 3</option>
90+
</select>
91+
<label>Single-Select with Value set</label>
92+
</div>
93+
<div class="input-field col s12 m6">
94+
<select multiple class="icons">
95+
<option value="" disabled selected>Choose your option</option>
96+
<option value="1" selected data-icon="../../docs/images/placeholder/250x250_a.png">example 1</option>
97+
<option value="2" selected data-icon="../../docs/images/placeholder/250x250_b.png">example 2</option>
98+
<option value="3" disabled data-icon="../../docs/images/placeholder/250x250_c.png">example 3</option>
99+
<option value="4" selected disabled data-icon="../../docs/images/placeholder/250x250_d.png">example 3</option>
100+
<option value="5" data-icon="../../docs/images/placeholder/250x250_e.png">example 4</option>
101+
<option value="6">example 5</option>
102+
</select>
103+
<label>Multi-Select with Images (right) and Pre-Selections</label>
104+
</div>
73105
</div>
74106

75-
<div class="input-field col s12 m6">
76-
<select multiple class="icons">
77-
<option value="" disabled selected>Choose your option</option>
78-
<option value="1" selected data-icon="../../docs/images/placeholder/250x250_a.png">example 1</option>
79-
<option value="2" data-icon="../../docs/images/placeholder/250x250_b.png">example 2</option>
80-
<option value="3" disabled data-icon="../../docs/images/placeholder/250x250_c.png">example 3</option>
81-
<option value="4" selected disabled data-icon="../../docs/images/placeholder/250x250_d.png">example 3</option>
82-
</select>
83-
<label>Multi-Select with Images (right) and Pre-Selections</label>
107+
<div class="row">
108+
<h5>Dynamically generated Select-Options <button class="btn3">Create + Init Select</button></h5>
109+
<div class="input-field col s12 m6">
110+
<select class="dynamic-select-single"></select>
111+
<label>Dynamic Single-Select</label>
112+
</div>
113+
<div class="input-field col s12 m6">
114+
<select class="dynamic-select-multi" multiple></select>
115+
<label>Dynamic Multi-Select</label>
116+
</div>
84117
</div>
85118

86119
<label>Browser Select</label>
@@ -91,10 +124,6 @@
91124
<option value="3">Option 3</option>
92125
</select>
93126

94-
<div style="margin-top:3em;">
95-
<button class="btn1">First Single-Select Values</button>
96-
<button class="btn2">First Multi-Select Values</button>
97-
</div>
98127

99128
<script src="../../../bin/materialize.js"></script>
100129
<script type="text/javascript">
@@ -113,7 +142,38 @@
113142
});
114143
document.querySelector('.btn2').addEventListener('click', e => {
115144
alert(instances[1].getSelectedValues());
145+
});
146+
document.querySelector('.btn3').addEventListener('click', e => {
147+
const optionIndexes = [1,2,3,4,5,6];
148+
// Single-Select
149+
const singleSelect = document.querySelector('.dynamic-select-single');
150+
singleSelect.innerHTML = '';
151+
optionIndexes.map(index => {
152+
const option = document.createElement('option');
153+
option.value = index;
154+
option.innerText = 'option '+index;
155+
const isSelected = index === 3;
156+
// Set via Attribute
157+
if (isSelected)
158+
option.setAttribute('selected', 'selected');
159+
singleSelect.appendChild(option);
160+
});
161+
// Multi-Select
162+
const multiSelect = document.querySelector('.dynamic-select-multi');
163+
multiSelect.innerHTML = '';
164+
optionIndexes.map(index => {
165+
const option = document.createElement('option');
166+
option.value = index;
167+
option.innerText = 'option '+index;
168+
// Set directly (all even options)
169+
option.selected = index % 2 === 0;
170+
multiSelect.appendChild(option);
171+
});
172+
// Init both
173+
M.FormSelect.init(singleSelect, {});
174+
M.FormSelect.init(multiSelect, {});
116175
});
176+
117177
});
118178
</script>
119179
</body>

0 commit comments

Comments
 (0)