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`,
});

await 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`,
});

await 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`,
});

await dropDown.render();

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

selectedIndex :number

The selected index of the dropdown. The obtained value should be treated as a read-only property and should not be used for manipulation.

Type:
  • number
Source

text :string

This attribute represents the text content of the input field. It can be read to get the current content. Setting this attribute will programmatically update the content and will not trigger the onchange callback function to be called.

Type:
  • string
Source
Example
const dropDown = new TComponents.DropDown(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Dropdown title'
});

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

dropDown.text = 'title updated';

text :string

return the display label of the dropdown

Type:
  • string
Source
Example
const dropDown = new TComponents.DropDown(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Dropdown title'
});

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

console.log(dropDown.text); // Output: 'Dropdown title'

Methods

(protected) afterRenderOnce() → {void}

there are something need to do after render once

Overrides
Source
Returns:
Type: 
void

(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; }`);