HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Picker
An alternative to the <select> element. Essentially a button and a menu glued together with useful functions for setting and getting the currently selected value.
Examples

HTML

<button id="example" class="hx-btn"></button>

JavaScript

new hx.Picker('#example', {
  items: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Other'],
  startValue: 'Option 1'
})
Api
Change Log
Prototypes
hx.PickerextendsEventEmitterdeprecated
Deprecated
Deprecated in favour of the new SingleSelect component that merges Picker and AutocompletePicker functionality.
Constructors
hx.PickerselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The target button to set the select up in.
options
Properties
disabledBoolean
Whether the picker should be disabled
Default: false
dropdownOptions
The options to use for the dropdown. See the See the dropdown constructor for the available options.
fullWidthBoolean
Whether the picker should be the full width of the container
Default: false
itemsArray / Function
The list of items that can be selected. Can also be an array of objects with value properties (and other information for displaying the items). For this a custom renderer must be set.
This can also be set after the select has been constructed using the items method.
noValueTextString
The text to use when no value is selected.
Default: 'Chooseavalue...'
renderer
A function that renders the data in the dropdown and the select button. The default value is: 
function (node, data) {
  hx.select(node).text(data);
}
This can also be set after the select has been constructed using the renderer method.
valueString
The value to use when initialising the select.
Events
change
Emitted when the dropdown is shown or hidden
Properties
causeString
Can be 'user' or 'api', depending on what caused the change. 'api' means an call to the javascript api caused the change, 'user' means that the change was caused by inputting
valueAny
The item that was selected.
dropdown.changeBoolean
Emitted when the dropdown is shown or hidden. The data with the event is a boolean indicating whether or not the dropdown is visible. True means it has
dropdown.hideend
Emitted when the dropdown animation ends. No data is sent with this event.
dropdown.hidestart
Emitted when the dropdown animation starts. No data is sent with this event.
dropdown.showend
Emitted when the dropdown animation finishes. No data is sent with this event.
dropdown.showstart
Emitted when the dropdown animation starts. No data is sent with this event.
highlight
The event called when an item is set as the active item. This can only be done by the keyboard or when the user clicks on an item
Properties
eventTypeString
The type of event that caused the selection:
  • 'click' - User clicked
  • 'arrow' - User used the arrow keys
itemString / Object
The item as it was passed into the select.
Methods
disabledvalueBooleanPicker
A method for disabling or enabling a picker
Arguments
valueBoolean
Whether the picker should be disabled
Returns
Picker
This picker
disabledBoolean
A method for getting the disabled state of a picker
Returns
Boolean
Whether the picker is disabled
itemsdataFetcherFunctionPicker
Set the items for the select using a function that returns the data.
Arguments
dataFetchercallbackFunction
The function to call to get the data. This will be called whenever the value is set or the select is opened, allowing the data to be changed easily.
It is recommended that the data for a select be cached where possible when using the function to set the data.
Arguments
callbackdataArray[String / Object]
The function to call when the data has loaded
Arguments
dataArray[String / Object]
The items to add to the select.
Returns
Picker
itemsitemsArray[Any]Picker
Sets the list of items that will be shown in the select dropdown. If the current value is present in the new list of items, the value will be retained. Otherwise, the value will be set to undefined
Arguments
itemsArray[Any]
The list of items that can be selected. Can also be an array of objects with value properties (and other information for displaying the items). For this a custom renderer must be set.
Returns
Picker
This Picker
itemsArray[Any] / Function
Gets the list of items that will be shown in the select dropdown, or if a function has been set it will return that.
Returns
Array[Any] / Function
The currently set items.
rendererFunction
Gets the current item renderer function.
Returns
function
The current renderer if no arguments are provided.
rendererrenderFunctionPicker
Sets the item renderer function.
Arguments
rendernodeHTMLElementdataAny
Arguments
nodeHTMLElement
dataAny
Returns
Picker
This Picker
valuevalueStringPicker
Sets the currently selected item. Passing in undefined will clear the value, unless an item is found with a value of undefined
Arguments
valueString
The value of the item to select.
Returns
Picker
This Picker.
valueAny
Gets the currently selected item.
Returns
Any
The currently selected item.
Functions
hx.pickeroptionsObjectSelectiondeprecated
Deprecated
Deprecated in favour of the new SingleSelect component that merges Picker and AutocompletePicker functionality.
Creates a new Picker set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing Picker
Returns
Selection
A selection containing an element with an Picker initialised on it