TComponents. 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:
NameTypeAttributesDescription
parentHTMLElement

HTML element that is going to be the parent of the component

propsTComponents.SelectProps<optional>
Properties
NameTypeDescription
propsTComponents.SelectProps
Source
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

Members

highlight :boolean

Sets whether the select component is highlighted.

Type:
  • boolean
Source
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.

  1. If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the select object.
  2. 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
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
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
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
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
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) afterRenderOnce() → {void}

there are something need to do after render once

Overrides
Source
Returns:
Type: 
void

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

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

Overrides
Source
Returns:
Type: 
TComponents.SelectProps

markup() → {string}

Returns the markup for the select component.

Overrides
Source
Returns:

The HTML markup string.

Type: 
string

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

Initializes the component.

Overrides
Source
Returns:
Type: 
Promise.<void>

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

Renders the select component.

Overrides
Source
Throws:

Throws an error if rendering fails.

Type
Error
Returns:
Type: 
Promise.<void>

setText(text)

This attribute is used to set the text of the Select component. When you set this attribute, the component will attempt to synchronize the new text value with any bound variables or data sources.

Parameters:
NameTypeDescription
textstring
Source
Example
const selectBox = new TComponents.Select(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

selectBox.setText(0);

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:
NameTypeDescription
cssstring

The css string to be loaded into style tag

Source
Returns:
Type: 
void
Example
TComponents.Select.loadCssClassFromString(`
.tc-select {
  height: inherit;
 }`
);