Options
All
  • Public
  • Public/Protected
  • All
Menu

Class HTMLMultiSelectElement

Provide a multi-select workflow using a select element as the input mechanism.

internal
example

Multi-Select HTML Markup

<multi-select name="select-many-things">
  <optgroup label="Basic Options">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
  </optgroup>
  <optgroup label="Advanced Options">
   <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </optgroup>
</multi-select>

Hierarchy

Index

Constructors

Methods

Properties

Accessors

Events

Constructors

constructor

Methods

_buildElements

  • _buildElements(): (HTMLDivElement | HTMLSelectElement)[]

_refresh

  • _refresh(): void

_activateListeners

  • _activateListeners(): void

connectedCallback

  • connectedCallback(): void

disconnectedCallback

  • disconnectedCallback(): void

select

  • select(value: string): void

unselect

  • unselect(value: string): void

Protected _initializeOptions

  • _initializeOptions(): void

Private #onChangeSelect

  • #onChangeSelect(event: Event): void

  • Handle changes to the Select input, marking the selected option as a chosen value.

    Parameters

    • event: Event

      The change event on the select element

    Returns void

Private #onClickTag

  • #onClickTag(event: PointerEvent): void

  • Handle click events on a tagged value, removing it from the chosen set.

    Parameters

    • event: PointerEvent

      The originating click event on a chosen tag

    Returns void

Private #onFormData

  • #onFormData(event: FormDataEvent): void

Properties

form

form: HTMLFormElement = null

The form this custom element belongs to, if any.

Protected _options

_options: any[]

Predefined elements which were defined in the original HTML.

Protected _choices

_choices: Object = {}

An object which maps option values to displayed labels.

Protected _chosen

_chosen: Set<string> = ...

An array of identifiers which have been chosen.

Private #select

#select: HTMLSelectElement

A select element used to choose options.

Private #tags

#tags: HTMLDivElement

A display element which lists the chosen options.

Private #formDataHandler

#formDataHandler: Function = null

The bound form data handler method

Accessors

name

  • get name(): string
  • set name(value: string): void

  • The name of the multi-select input element.

    Returns string

  • The name of the multi-select input element.

    Parameters

    • value: string

    Returns void

value

  • get value(): string[]
  • set value(values: string[]): void

  • The values of the multi-select input are expressed as an array of strings.

    Returns string[]

  • The values of the multi-select input are expressed as an array of strings.

    Parameters

    • values: string[]

    Returns void

Events

Static onChange

onChange: any

The "change" event is emitted when the values of the multi-select element are changed.

param event

A "change" event passed to event listeners.