Option group single select box

This commit is contained in:
Josh Johnson 2016-05-08 12:27:08 +01:00
parent c76088fc8f
commit 543ac2226f
3 changed files with 42 additions and 4 deletions

File diff suppressed because one or more lines are too long

View file

@ -1051,7 +1051,11 @@ export class Choices {
groups.forEach((group, i) => {
// Grab options that are children of this group
const groupOptions = options.filter((option) => {
return option.groupId === group.id;
if(this.passedElement.type === 'select-one') {
return option.groupId === group.id
} else {
return option.groupId === group.id && !option.selected;
}
});
if(groupOptions.length >= 1) {

View file

@ -46,7 +46,7 @@
<option value="Dropdown item 3">Dropdown item 3</option>
</select>
<label for="choices-10">Select box with option groups</label>
<label for="choices-10">Option groups</label>
<select id="choices-10" name="choices-10" data-choice placeholder="This is a placeholder" multiple>
<optgroup label="UK">
<option value="London">London</option>
@ -90,6 +90,40 @@
<label for="choices-12">Options from remote source</label>
<select name="choices-12" id="choices-12" data-choice placeholder="Pick an Arctic Monkeys record"></select>
<label for="choices-13">Option groups</label>
<select id="choices-13" name="choices-13" data-choice placeholder="This is a placeholder">
<optgroup label="UK">
<option value="London">London</option>
<option value="Manchester">Manchester</option>
<option value="Liverpool">Liverpool</option>
</optgroup>
<optgroup label="FR">
<option value="Paris">Paris</option>
<option value="Lyon">Lyon</option>
<option value="Marseille">Marseille</option>
</optgroup>
<optgroup label="DE" disabled>
<option value="Hamburg">Hamburg</option>
<option value="Munich">Munich</option>
<option value="Berlin">Berlin</option>
</optgroup>
<optgroup label="US">
<option value="New York">New York</option>
<option value="Washington" disabled>Washington</option>
<option value="Michigan">Michigan</option>
</optgroup>
<optgroup label="SP">
<option value="Madrid">Madrid</option>
<option value="Barcelona">Barcelona</option>
<option value="Malaga">Malaga</option>
</optgroup>
<optgroup label="CA">
<option value="Montreal">Montreal</option>
<option value="Toronto">Toronto</option>
<option value="Vancouver">Vancouver</option>
</optgroup>
</select>
</div>
</div>
<script>