Skip to content

Commit 1170d26

Browse files
committed
fixed multiple select with optgroups initial selection
1 parent 4e624d0 commit 1170d26

File tree

2 files changed

+40
-19
lines changed

2 files changed

+40
-19
lines changed

js/forms.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -669,10 +669,10 @@
669669
// Add initial multiple selections.
670670
if (multiple) {
671671
$select.find("option:selected:not(:disabled)").each(function () {
672-
var index = $(this).index();
672+
var index = this.index;
673673

674674
toggleEntryFromArray(valuesSelected, index, $select);
675-
options.find("li").eq(index).find(":checkbox").prop("checked", true);
675+
options.find("li:not(.optgroup)").eq(index).find(":checkbox").prop("checked", true);
676676
});
677677
}
678678

test/html/forms.html

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,25 @@ <h3>Select</h3>
174174
<label>Materialize Select optgroups</label>
175175
</div>
176176

177+
<!-- select with optgroups -->
178+
<div class="input-field col s4">
179+
<select>
180+
<optgroup label="team 1">
181+
<option value="1">Option 1</option>
182+
<option value="2">Option 2</option>
183+
</optgroup>
184+
<optgroup label="team 2">
185+
<option value="3">Option 3</option>
186+
<option value="4" selected>Option 4</option>
187+
</optgroup>
188+
<optgroup label="team 3">
189+
<option value="5" disabled>Option 5</option>
190+
<option value="6">Option 6</option>
191+
</optgroup>
192+
</select>
193+
<label>Materialize Select optgroups with selected</label>
194+
</div>
195+
177196
<!-- select multiple with optgroups -->
178197
<div class="input-field col s4">
179198
<select multiple>
@@ -194,30 +213,32 @@ <h3>Select</h3>
194213
</select>
195214
<label>Materialize Multiple Select with optgroups</label>
196215
</div>
216+
</div>
197217

198-
<!-- select with optgroups -->
218+
<div class="row">
219+
<!-- select multiple with optgroups -->
199220
<div class="input-field col s4">
200-
<select>
201-
<optgroup label="team 1">
202-
<option value="1">Option 1</option>
203-
<option value="2">Option 2</option>
221+
<select multiple>
222+
<optgroup label="Cars &amp; Trucks">
223+
<option value="6">Lamborgini</option>
224+
<option value="7" selected>Ferrari</option>
204225
</optgroup>
205-
<optgroup label="team 2">
206-
<option value="3">Option 3</option>
207-
<option value="4" selected>Option 4</option>
226+
227+
<optgroup label="Electronics">
228+
<option value="5">Computers</option>
229+
<option value="8">DVD</option>
208230
</optgroup>
209-
<optgroup label="team 3">
210-
<option value="5" disabled>Option 5</option>
211-
<option value="6">Option 6</option>
231+
232+
<optgroup label="Toys">
233+
<option value="9" selected>Wooden Toys</option>
234+
<option value="10">Plush Toys</option>
212235
</optgroup>
213236
</select>
214-
<label>Materialize Select optgroups with selected</label>
237+
<label>Materialize Multiple Select optgroups with selected</label>
215238
</div>
216-
</div>
217239

218-
<!-- select with overflow -->
219-
<div class="row">
220-
<div class="input-field col s6">
240+
<!-- select with overflow -->
241+
<div class="input-field col s4">
221242
<select>
222243
<option value="" disabled >Choose your option</option>
223244
<option value="1">1</option>
@@ -233,7 +254,7 @@ <h3>Select</h3>
233254
<label>Materialize Select with overflow</label>
234255
</div>
235256

236-
<div class="input-field col s6">
257+
<div class="input-field col s4">
237258
<select id="optgroups-select">
238259
<option>Option before optgroup</option>
239260
<optgroup label="Optgroup">

0 commit comments

Comments
 (0)