Select
| Last update: | () |
| Message | feat(select): readonly attribute |
| Committer: | Tamás Bíró |
| Version history | |
Default
<div class="e-field">
<label for="select1" class="e-field__label">
Select label
</label>
<e-select>
<select id="select1" class="e-select">
<option value label="empty value">
Empty
</option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">
Alaska
</option>
<option value="HI">
Hawaii
</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">
California
</option>
<option value="NV">
Nevada
</option>
<option value="OR">
Oregon
</option>
<option value="WA">
Washington
</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">
Arizona
</option>
<option value="CO">
Colorado
</option>
<option value="ID">
Idaho
</option>
<option value="MT">
Montana
</option>
<option value="NE">
Nebraska
</option>
<option value="NM">
New Mexico
</option>
<option value="ND">
North Dakota
</option>
<option value="UT">
Utah
</option>
<option value="WY">
Wyoming
</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">
Alabama
</option>
<option value="AR">
Arkansas
</option>
<option value="IL">
Illinois
</option>
<option value="IA">
Iowa
</option>
<option value="KS">
Kansas
</option>
<option value="KY">
Kentucky
</option>
<option value="LA">
Louisiana
</option>
<option value="MN">
Minnesota
</option>
<option value="MS">
Mississippi
</option>
<option value="MO">
Missouri
</option>
<option value="OK">
Oklahoma
</option>
<option value="SD">
South Dakota
</option>
<option value="TX">
Texas
</option>
<option value="TN">
Tennessee
</option>
<option value="WI">
Wisconsin
</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">
Connecticut
</option>
<option value="DE">
Delaware
</option>
<option value="FL">
Florida
</option>
<option value="GA">
Georgia
</option>
<option value="IN">
Indiana
</option>
<option value="ME">
Maine
</option>
<option value="MD">
Maryland
</option>
<option value="MA">
Massachusetts
</option>
<option value="MI">
Michigan
</option>
<option value="NH">
New Hampshire
</option>
<option value="NJ">
New Jersey
</option>
<option value="NY">
New York
</option>
<option value="NC">
North Carolina
</option>
<option value="OH">
Ohio
</option>
<option value="PA">
Pennsylvania
</option>
<option value="RI">
Rhode Island
</option>
<option value="SC">
South Carolina
</option>
<option value="VT">
Vermont
</option>
<option value="VA">
Virginia
</option>
<option value="WV">
West Virginia
</option>
</optgroup>
</select>
</e-select>
</div>
<div class="e-field">
<label for="select1" class="e-field__label">Select label</label>
<e-select>
<select id="select1" class="e-select">
<option value="" label="empty value">Empty</option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</e-select>
</div>Variations
Disabled
<div class="e-field">
<label class="e-field__label">
Select label
</label>
<e-select>
<select disabled class="e-select">
<option value="0">
</option>
<option value="1" selected="selected">
Culpa amet id
</option>
<option value="2" disabled="disabled">
Dolor do officia
</option>
<option value="3">
Tempor et exercitation
</option>
<option value="4">
Adipiscing commodo ut
</option>
<option value="5">
Dolor enim enim
</option>
<option value="6">
Amet officia do
</option>
<option value="7">
Laboris eiusmod consectetur
</option>
<option value="8">
Tempor sunt quis
</option>
<option value="9">
Id in sit
</option>
</select>
</e-select>
</div>
<div class="e-field">
<label class="e-field__label">Select label</label>
<e-select>
<select disabled class="e-select">
<option value="0"> </option>
<option value="1" selected="selected">Elit elit duis
</option>
<option value="2" disabled="disabled">Excepteur ut aliqua
</option>
<option value="3">Ut officia sunt
</option>
<option value="4">Proident reprehenderit non
</option>
<option value="5">Culpa minim lorem
</option>
<option value="6">Labore ut laborum
</option>
<option value="7">Lorem dolor ut
</option>
<option value="8">Labore enim aliqua
</option>
<option value="9">Dolore nisi reprehenderit
</option>
</select>
</e-select>
</div>Readonly
<div class="e-field">
<label class="e-field__label">
Select label
</label>
<e-select readonly>
<select class="e-select">
<option value="0">
</option>
<option value="1" selected="selected">
Eu enim fugiat
</option>
<option value="2" disabled="disabled">
Magna non incididunt
</option>
<option value="3">
Ut veniam tempor
</option>
<option value="4">
Ut in ullamco
</option>
<option value="5">
Lorem amet tempor
</option>
<option value="6">
Deserunt consectetur officia
</option>
<option value="7">
In nisi non
</option>
<option value="8">
Cupidatat laborum deserunt
</option>
<option value="9">
Nisi aute magna
</option>
</select>
</e-select>
</div>
<div class="e-field">
<label class="e-field__label">Select label</label>
<e-select readonly>
<select class="e-select">
<option value="0"> </option>
<option value="1" selected="selected">Ex irure amet
</option>
<option value="2" disabled="disabled">Adipiscing sunt enim
</option>
<option value="3">Lorem et laboris
</option>
<option value="4">Sed irure consequat
</option>
<option value="5">Nisi cupidatat velit
</option>
<option value="6">Et labore duis
</option>
<option value="7">Deserunt ut veniam
</option>
<option value="8">Ex adipiscing duis
</option>
<option value="9">Incididunt sint ut
</option>
</select>
</e-select>
</div>Inline
<div class="e-field">
<label for="select3" class="e-field__label">
Select label
</label>
<e-select>
<select id="select3" class="e-select e-select-inline">
<option value="0">
</option>
<option value="1" selected="selected">
Est magna do
</option>
<option value="2" disabled="disabled">
Ipsum elit dolore
</option>
<option value="3">
Sunt eiusmod in
</option>
<option value="4">
Ex in sunt
</option>
</select>
</e-select>
</div>
<div class="e-field">
<label for="select3" class="e-field__label">Select label</label>
<e-select>
<select id="select3" class="e-select e-select-inline">
<option value="0"> </option>
<option value="1" selected="selected">Id in in
</option>
<option value="2" disabled="disabled">Ut laborum incididunt
</option>
<option value="3">Dolore velit exercitation
</option>
<option value="4">Et anim ut
</option>
</select>
</e-select>
</div>Inline with button
<div class="e-field">
<label for="select3" class="e-field__label">
Select label
</label>
<e-select>
<select id="select3" class="e-select e-select-inline">
<option value="0">
</option>
<option value="1" selected="selected">
Dolor exercitation deserunt
</option>
<option value="2" disabled="disabled">
Commodo adipiscing ad
</option>
<option value="3">
In eiusmod eiusmod
</option>
<option value="4">
In aliquip amet
</option>
</select>
</e-select>
<button class="e-btn">
Sample Button
</button>
</div>
<div class="e-field">
<label for="select3" class="e-field__label">Select label</label>
<e-select>
<select id="select3" class="e-select e-select-inline">
<option value="0"> </option>
<option value="1" selected="selected">Ex do id
</option>
<option value="2" disabled="disabled">Minim reprehenderit consectetur
</option>
<option value="3">Id nisi minim
</option>
<option value="4">Et proident duis
</option>
</select>
</e-select>
<button class="e-btn">Sample Button</button>
</div>Small
<div class="e-field">
<label for="selectvar" class="e-field__label">
Select label
</label>
<e-select>
<select id="selectvar" class="e-select e-select-small">
<option value="0">
</option>
<option value="1" selected="selected">
Amet adipiscing ipsum
</option>
<option value="2" disabled="disabled">
Qui quis in
</option>
<option value="3">
Officia aliqua esse
</option>
<option value="4">
Sit sunt sint
</option>
</select>
</e-select>
</div>
<div class="e-field">
<label for="selectvar" class="e-field__label">Select label</label>
<e-select>
<select id="selectvar" class="e-select e-select-small">
<option value="0"> </option>
<option value="1" selected="selected">Et velit adipiscing
</option>
<option value="2" disabled="disabled">Ea enim dolore
</option>
<option value="3">Est tempor commodo
</option>
<option value="4">Veniam proident esse
</option>
</select>
</e-select>
</div>Medium
<div class="e-field">
<label for="selectvar" class="e-field__label">
Select label
</label>
<e-select>
<select id="selectvar" class="e-select e-select-medium">
<option value="0">
</option>
<option value="1" selected="selected">
In adipiscing cillum
</option>
<option value="2" disabled="disabled">
Consectetur excepteur labore
</option>
<option value="3">
Dolor enim sunt
</option>
<option value="4">
Cillum voluptate ipsum
</option>
</select>
</e-select>
</div>
<div class="e-field">
<label for="selectvar" class="e-field__label">Select label</label>
<e-select>
<select id="selectvar" class="e-select e-select-medium">
<option value="0"> </option>
<option value="1" selected="selected">Excepteur do cupidatat
</option>
<option value="2" disabled="disabled">Duis qui occaecat
</option>
<option value="3">Dolore qui ut
</option>
<option value="4">Tempor cillum labore
</option>
</select>
</e-select>
</div>Large
<div class="e-field">
<label for="selectvar" class="e-field__label">
Select label
</label>
<e-select>
<select id="selectvar" class="e-select e-select-large">
<option value="0">
</option>
<option value="1" selected="selected">
Adipiscing ut dolore
</option>
<option value="2" disabled="disabled">
Cillum est incididunt
</option>
<option value="3">
Enim sit reprehenderit
</option>
<option value="4">
Ut dolore incididunt
</option>
</select>
</e-select>
</div>
<div class="e-field">
<label for="selectvar" class="e-field__label">Select label</label>
<e-select>
<select id="selectvar" class="e-select e-select-large">
<option value="0"> </option>
<option value="1" selected="selected">Enim consectetur nostrud
</option>
<option value="2" disabled="disabled">Minim velit cupidatat
</option>
<option value="3">Pariatur excepteur amet
</option>
<option value="4">Mollit anim ipsum
</option>
</select>
</e-select>
</div>Disable min width
<div class="e-field">
<label for="select4" class="e-field__label">
Select label
</label>
<e-select disable-min-width="true">
<select id="select4" class="e-select e-select-small">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
</select>
</e-select>
</div>
<div class="e-field">
<label for="select4" class="e-field__label">Select label</label>
<e-select disable-min-width="true">
<select id="select4" class="e-select e-select-small">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</e-select>
</div>Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
<div ng-init="data = { availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ], selectedOption: {id: '3', name: 'Option C'} }"></div>
<div class="e-field">
<label for="input2" class="e-field__label">
Select label
<span class="text-size-small">
{{ data.selectedOption }}
</span>
</label>
<e-select>
<select name="Select" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption" class="e-select"></select>
</e-select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
<div ng-init="data = { availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ], selectedOption: {id: '3', name: 'Option C'} }"></div>
<div class="e-field">
<label for="input2" class="e-field__label">Select label <span class="text-size-small">{{ data.selectedOption }}</span></label>
<e-select>
<select name="Select" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption" class="e-select"></select>
</e-select>
</div>
</div>API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| disable-min-width | If it's true, then dropdown will has the same width as select | boolean | false |