Class: Select

new Select(parent, propsopt)

This component allows users to choose from a list of options. Additional callbacks can be added with the onChange method. This class focuses on the specific properties of the Select component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:

Name	Type	Attributes	Description
`parent`	HTMLElement		HTML element that is going to be the parent of the component
`props`	TComponents.SelectProps	<optional>

Properties

Name	Type	Description
`props`	TComponents.SelectProps

Source: as-select.js, line 66

Example

const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component.
selectBox.render();

Extends

TComponents.Component_A

Members

highlight :boolean

Sets whether the select component is highlighted.

Type:

boolean

Source: as-select.js, line 268

Example

const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component.
selectBox.render();

selectBox.highlight = true;

onChange :function

Sets the onChange event handler. The handler can either be a string representing a function to be executed or a function itself.

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the select object.
If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.

Correct (Statements Only): xx.onChange = "console.log('Action done.');"
Incorrect (Function Declaration): xx.onChange = "function() { console.log('Action done.'); }"

Type:

function

Source: as-select.js, line 334

Examples

const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component.
selectBox.render();

// Example 1: Using a string as the handler:
selectBox.onChange = "console.log('state changed', this.selectedIndex);";

// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the selectBox object
selectBox.onChange = () => { console.log('state changed', selectBox.selectedIndex); };

// Example 3: Using a common function as the handler:
selectBox.onChange = async function() {
  console.log('state changed', this.selectedIndex);
};

optionItems :string

Sets the option items from a formatted string.

Type:

string

Source: as-select.js, line 509

Example

const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component.
selectBox.render();

selectBox.optionItems = "Option 4|value4;Option 5|value5;Option 6|value6";

selectedIndex

Sets the index of the currently selected option.

Source: as-select.js, line 469

Example

const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component.
selectBox.render();

selectBox.selectedIndex = 1;

text :string

Sets the text to enable selected option.

Type:

string

Source: as-select.js, line 388

Example

const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component.
selectBox.render();

selectBox.text = 'value2';

value :string

Sets the value to enable selected option.

Type:

string

Source: as-select.js, line 438

Example

const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component.
selectBox.render();

selectBox.value = 'value2';

Methods

(protected) defaultProps() → {TComponents.SelectProps}

Returns the default values of class properties (excluding parent properties).

Overrides: TComponents.Component_A#defaultProps
Source: as-select.js, line 102

Returns:

Type:: TComponents.SelectProps

markup() → {string}

Returns the markup for the select component.

Overrides: TComponents.Component_A#markup
Source: as-select.js, line 251

Returns:

The HTML markup string.

Type:: string

(async) onInit() → {Promise.<void>}

Initializes the component.

Overrides: TComponents.Component_A#onInit
Source: as-select.js, line 182

Returns:

Type:: Promise.<void>

(async) onRender() → {Promise.<void>}

Renders the select component.

Overrides: TComponents.Component_A#onRender
Source: as-select.js, line 217

Throws:

Throws an error if rendering fails.
Type Error

Returns:

Type:: Promise.<void>

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-select.js, line 541

Returns:

Type:: void

Example

TComponents.Select.loadCssClassFromString(`
.tc-select {
  height: inherit;
 }`
);