Multiselect Examples
e-multiselect
<div class="e-field">
<label class="e-field__label">
Multiselect Label
</label>
<e-multiselect placeholder="Select one or more options">
<e-select-option value="option_value">
Option 1
</e-select-option>
<e-select-option>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option>
Option 6
</e-select-option>
<e-select-option>
Option 7
</e-select-option>
<e-select-option>
Option 8
</e-select-option>
</e-multiselect>
</div>[disabled]
<e-multiselect>
<e-select-option>
Option 1
</e-select-option>
<e-select-option>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option selected>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option selected>
Option 6
</e-select-option>
<e-select-option disabled>
Option 7
</e-select-option>
<e-select-option>
Option 8
</e-select-option>
</e-multiselect><e-multiselect placeholder="Select one or more options">
<e-select-option value="option_value" disabled>
Option 1
</e-select-option>
<e-select-option>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option disabled>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option>
Option 6
</e-select-option>
<e-select-option disabled>
Option 7
</e-select-option>
<e-select-option disabled>
Option 8
</e-select-option>
<e-select-option>
Option 9
</e-select-option>
</e-multiselect>[disabled]
<e-multiselect disabled>
<e-select-option>
Option 1
</e-select-option>
<e-select-option selected>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option selected>
Option 6
</e-select-option>
<e-select-option selected>
Option 7
</e-select-option>
<e-select-option>
Option 8
</e-select-option>
</e-multiselect>[readonly]
<e-multiselect readonly>
<e-select-option>
Option 1
</e-select-option>
<e-select-option selected>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option selected>
Option 6
</e-select-option>
<e-select-option selected>
Option 7
</e-select-option>
<e-select-option>
Option 8
</e-select-option>
</e-multiselect>[loading]
<e-multiselect loading>
</e-multiselect>[invalid]
<div class="e-field">
<label class="e-field__label">
Multiselect Label
</label>
<e-multiselect invalid>
<e-select-option>
Option 1
</e-select-option>
<e-select-option>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option selected>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option>
Option 6
</e-select-option>
<e-select-option>
Option 7
</e-select-option>
<e-select-option>
Option 8
</e-select-option>
</e-multiselect>
<span class="e-field__message e-field__message-error">
Selection isn't valid, please check selection.
</span>
</div>.e-multiselect-large
<e-multiselect class="e-multiselect-large" placeholder="Select one or more options">
<e-select-option value="option_value">
Option 1
</e-select-option>
<e-select-option>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option>
Option 6
</e-select-option>
<e-select-option>
Option 7
</e-select-option>
<e-select-option>
Option 8
</e-select-option>
</e-multiselect>[inline]
<div class="e-field">
<label class="e-field__label e-field__label-inline">
Multiselect Label
</label>
<e-multiselect placeholder="Select one or more options" inline>
<e-select-option value="this is option">
Option 1
</e-select-option>
<e-select-option>
Option 2
</e-select-option>
<e-select-option>
Option 3
</e-select-option>
<e-select-option>
Option 4
</e-select-option>
<e-select-option>
Option 5
</e-select-option>
<e-select-option>
Option 6
</e-select-option>
<e-select-option>
Option 7
</e-select-option>
<e-select-option>
Option 8
</e-select-option>
</e-multiselect>
</div>[items]
<e-multiselect id="itemsExample"></e-multiselect>document.querySelector('#itemsExample').items = [
{ content: 'option 1', value: 'option1' },
{ type: 'group', label: 'Group 1', items: [
{ content: 'option 2', value: 'option2', disabled: true },
{ content: 'option 3', value: 'option3', selected: true }
] }
];[label-merge-limit]
<e-multiselect id="itemsExample" label-merge-limit="1"></e-multiselect>document.querySelector('#itemsExample').items = [
{ type: 'option', content: 'option 1', value: 'option1' },
{ type: 'option', content: 'option 2', value: 'option2' },
{ type: 'option', content: 'option 3', value: 'option3', selected: true }
];.e-multiselect
<div class="e-multiselect">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<select class="e-multiselect__select" name="multiselect1" multiple>
<option value="1">
Cillum et
</option>
<option value="2">
Irure in
</option>
<option value="3">
Dolore eu
</option>
<option value="4">
Enim ex
</option>
<option value="5">
Qui cillum
</option>
<option value="6">
In ex
</option>
<option value="7">
Enim pariatur
</option>
<option value="8">
Ad occaecat
</option>
<option value="9">
Ut esse
</option>
<option value="10">
Exercitation nostrud
</option>
</select>
</div>
</div>.e-multiselect.e-multiselect-large
<div class="e-multiselect e-multiselect-large">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<select class="e-multiselect__select" name="multiselect2" multiple>
<option value="1">
Dolor et
</option>
<option value="2">
Fugiat id
</option>
<option value="3">
Voluptate magna
</option>
<option value="4">
Voluptate consequat
</option>
<option value="5">
Sed dolore
</option>
<option value="6">
Mollit elit
</option>
<option value="7">
Dolor anim
</option>
<option value="8">
Dolor anim
</option>
<option value="9">
Laboris aliquip
</option>
<option value="10">
Ipsum mollit
</option>
</select>
</div>
</div>.e-multiselect.e-multiselect-large
<div class="e-multiselect e-multiselect-large">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<div class="e-multiselect__emptystate">
No available item
</div>
</div>
</div><div class="e-multiselect">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<select class="e-multiselect__select" name="multiselect2" multiple>
<option value="1">
Sed excepteur
</option>
<option value="2">
Voluptate dolor
</option>
<option value="3">
Elit labore
</option>
<option value="4">
Cillum ut
</option>
<option value="5">
Sunt ipsum
</option>
<option value="6">
Voluptate cupidatat
</option>
<option value="7">
Deserunt irure
</option>
<option value="8">
Dolore aute
</option>
<option value="9">
Nostrud in
</option>
<option value="10">
Id irure
</option>
</select>
</div>
<div class="e-multiselect__buttons">
<div class="e-btn e-btn-onlyicon" onclick="MoveRight()">
<e-icon icon="e-angle-double-right"></e-icon>
</div>
<div class="e-btn e-btn-onlyicon" onclick="MoveLeft()">
<e-icon icon="e-angle-double-left"></e-icon>
</div>
</div>
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
FIELDS FOR THE EXPORT
</div>
<select class="e-multiselect__select" id="chosen_elements" name="chosen_elements" multiple>
<option value="1">
Aute ad
</option>
<option value="2">
Esse in
</option>
<option value="3">
Deserunt proident
</option>
<option value="4">
Fugiat ullamco
</option>
<option value="5">
Veniam irure
</option>
</select>
</div>
</div>