TComponents. DropDown

The Dropdown 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 DropDown component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeDescription
parentHTMLElement

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

propsTComponents.DropdownProps

The properties of the dropdown component

Source
Example
const dropDown = new TComponents.DropDown(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`,
});

dropDown.render();

Extends

Members

onChange :function

Set the onChange handler for the dropdown. 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 dropdown 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.onClick = "console.log('Action done.');"
  • Incorrect (Function Declaration): xx.onClick = "function() { console.log('Action done.'); }"
Type:
  • function
Source
Examples
const dropDown = new TComponents.DropDown(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`,
});

dropDown.render();

// Example 1: Using a string as the handler:
dropDown.onChange = "console.log('hello', this.selectedValue);"
// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the dropDown object
dropDown.onChange = () => { console.log(dropDown.selectedValue); }
// Example 3: Using function with async operation:
dropDown.onChange = async function () {
 console.log('hello', this.selectedValue);
}

optionItems :string

Sets the option items from a formatted string.

Type:
  • string
Source
Example
const dropDown = new TComponents.DropDown(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`,
});

dropDown.render();

dropDown.optionItems = `newText1|newValue1;\nnewText2|newValue2;`;

(readonly) selectedIndex :number

The selected index of the dropdown.

Type:
  • number
Source

Methods

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

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

Overrides
Source
Returns:

The default properties object.

Type: 
TComponents.DropDownProps

markup() → {string}

Returns the markup for the Dropdown 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
Returns:
Type: 
Promise.<void>

(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.DropDown.loadCssClassFromString(`.tc-dropdown { background-color: red; }`);