Standard
<p>Standard</p>
<div id="single-select-standard"></div>const items = [
'Item #1',
'Item #2',
'Item #3',
'Item #4',
];
new hx.SingleSelect('#single-select-standard', items);Standard with search
<p>Standard with search</p>
<div id="single-select-search"></div>new hx.SingleSelect('#single-select-search', items, {
showSearch: true,
});Nested Items
<p>Nested Items</p>
<div id="single-select-nested-items"></div>const nestedItems = [
{ text: 'Name of group', children: ['Item #1', 'Item #2'] },
{ text: 'Name of second group', children: ['Item #3', 'Item #4'] },
'Item #5 (not in group)',
'Item #6',
];
new hx.SingleSelect('#single-select-nested-items', nestedItems);Disabled Item
<p>Disabled Item</p>
<div id="single-select-disabled-item"></div>const disabledItem = [
{ value: 'Item #1' },
{ value: 'Item #2' },
{ value: 'Item #3' },
{ value: 'Item #4' },
{ value: 'Item #5 (not available)', disabled: true },
{ value: 'Item #6' },
];
new hx.SingleSelect('#single-select-disabled-item', disabledItem);Disabled / Required
<p>Disabled / Required</p>
<form id="single-select-form">
<div id="single-select-disabled"></div>
<div id="single-select-required"></div>
<button id="submit" class="hx-btn hx-flag-button" type="submit">Submit</button>
</form>new hx.SingleSelect('#single-select-disabled', items, { disabled: true });
new hx.SingleSelect('#single-select-required', items, { required: true });
hx.select('#single-select-form').on('submit', (e) => {
e.preventDefault();
});Fluid
<p>Fluid</p>
<div id="single-select-container"></div>hx.select('#single-select-container')
.add(hx.singleSelect(items));<select> like element that uses an <input> for consistency and to allow for better form validation. valueLookup and renderer the items array or the items returned by the items function can be a string or an object. const stringItems = [
'Item #1',
'Item #2',
'Item #3',
];
const objectItems: [
{ value: 'Item #1' },
{ value: 'Item #2' },
{ value: 'Item #3' },
];const nestedItems = [
{
text: 'Group',
children: [
'Item #1',
'Item #2',
]
}
]useCache: false in when creating the SingleSelect hx.filter functions. All the filter types can be specified as the match type (e.g. 'startsWith', 'exact' or 'fuzzy') and the default value is 'contains' setCustomValidity when no value has been selected and this single select is marked as required (element, item) => {
const sel = select(element);
if (item && item.children) {
sel.text(item.text);
} else {
sel.text(options.valueLookup(item));
}
}Form.
When this is true, the pleaseSelectAValueText option is used as the error message. falsevalue property and should correspond to one of the items.
user when caused by a user interaction or api when caused by calling the value method items passed in, or undefined valueLookup and renderer the items array or the items returned by the items function can be a string or an object. const stringItems = [
'Item #1',
'Item #2',
'Item #3',
];
const objectItems: [
{ value: 'Item #1' },
{ value: 'Item #2' },
{ value: 'Item #3' },
];const nestedItems = [
{
text: 'Group',
children: [
'Item #1',
'Item #2',
]
}
]useCache: false in when creating the SingleSelect hx.filter functions. All the filter types can be specified as the match type (e.g. 'startsWith', 'exact' or 'fuzzy') and the default value is 'contains' setCustomValidity when no value has been selected and this single select is marked as required (element, item) => {
const sel = select(element);
if (item && item.children) {
sel.text(item.text);
} else {
sel.text(options.valueLookup(item));
}
}Form.
When this is true, the pleaseSelectAValueText option is used as the error message. falsevalue property and should correspond to one of the items.