Class HTMLMultiSelectElement

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

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 (View Summary)

Properties

_value _choices _internals _options _primaryInput formAssociated observedAttributes tagName

Accessors

disabled editable form name value

Methods

_activateListeners _applyInputAttributes _buildElements _getValue _refresh _setValue _toggleDisabled attributeChangedCallback connectedCallback select unselect _initialize _onClick create

Properties

_value

_value: Set<any> = ...

Protected_choices

_choices: Record<string, string> = {}

An object which maps option values to displayed labels.

Protected_internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

Protected_options

_options: (HTMLOptionElement | HTMLOptGroupElement)[] = []

Predefined elements which were defined in the original HTML.

Protected_primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

StaticformAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

StaticobservedAttributes

observedAttributes: string[] = ...

Attributes requiring change notifications

StatictagName

tagName: string = "multi-select"

Accessors

disabled

  • get disabled(): boolean

    Is this element disabled?

    Returns boolean

editable

  • get editable(): boolean

    Is this field editable? The field can be neither disabled nor readonly.

    Returns boolean

form

  • get form(): HTMLFormElement

    The form this element belongs to.

    Returns HTMLFormElement

name

  • get name(): string

    The input element name.

    Returns string

value

Methods

_activateListeners

_applyInputAttributes

  • _applyInputAttributes(input: HTMLElement): void
    Internal

    Apply key attributes on the containing custom HTML element to input elements contained within it.

    Parameters

    • input: HTMLElement

    Returns void

_buildElements

_getValue

_refresh

_setValue

_toggleDisabled

attributeChangedCallback

  • attributeChangedCallback(
        attrName: string,
        oldValue: null | string,
        newValue: null | string,
    ): void

    Fire a callback on change to an observed attribute.

    Parameters

    • attrName: string

      The name of the attribute

    • oldValue: null | string

      The old value: null indicates the attribute was not present.

    • newValue: null | string

      The new value: null indicates the attribute is removed.

    Returns void

connectedCallback

select

  • select(value: string): void

    Mark a choice as selected.

    Parameters

    • value: string

      The value to add to the chosen set

    Returns void

unselect

  • unselect(value: string): void

    Mark a choice as un-selected.

    Parameters

    • value: string

      The value to delete from the chosen set

    Returns void

Protected_initialize

Protected_onClick

  • _onClick(event: PointerEvent): void
    Protected

    Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.

    Parameters

    • event: PointerEvent

    Returns void

Staticcreate

Settings

Member Visibility

On This Page

Properties
Accessors
Methods