Select

Dropdown selector component with support for single selection, search, and custom styling.

Quick Start

Basic Usage

MikeTomLucy

<r-select style="width: 120px; height: 40px" defaultValue="185">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

API Reference

Select Properties

Property	Type	Default	Description
defaultValue	string	''	Default selected value
disabled	boolean	false	Whether the select is disabled
type	string	'default'	Select type: default, text
placement	string	'bottom'	Dropdown direction: top, bottom
showSearch	boolean	false	Whether to show search box
getPopupContainerId	string	''	Container element id for dropdown
dropdownclass	string	''	Custom class name for dropdown
trigger	string	'click'	Trigger method: click, hover, click,hover, none

Option Properties

Property	Type	Default	Description
value	string	''	Option value
disabled	boolean	false	Whether the option is disabled

Default Value defaultValue

MikeTomLucy

<r-select style="width: 120px; height: 40px" defaultValue="185">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Disabled State disabled

MikeTomLucy

<r-select style="width: 120px; height: 40px" disabled defaultValue="185">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Text Type type

MikeTomLucy

<r-select style="width: 120px; height: 40px" type="text" defaultValue="185">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Dropdown Direction placement

MikeTomLucy

<r-select style="width: 120px; height: 40px" type="text" defaultValue="185" placement="top">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Search Function showSearch

MikeTomLucy

<r-select style="width: 120px; height: 40px" showSearch>
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Container Mount getPopupContainerId

<r-select getPopupContainerId="elementid">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Custom Styling dropdownclass

<r-select dropdownclass="custom-dropdown">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Trigger Method trigger

MikeTomLucy

<!-- Click trigger (default) -->
<r-select trigger="click">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

<!-- Hover trigger -->
<r-select trigger="hover">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

<!-- Both click and hover -->
<r-select trigger="click,hover">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

<!-- No trigger -->
<r-select trigger="none">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

Events

Change Event

<r-select onchange="handleChange">
  <r-option value="185">Mike</r-option>
  <r-option value="186">Tom</r-option>
  <r-option value="187">Lucy</r-option>
</r-select>

<script>
  function handleChange(value) {
    console.log('Selected value:', value);
  }
</script>

Best Practices

• Option Count: Enable search when there are many options
• Trigger Method: Choose appropriate trigger based on user habits
• Mount Position: Pay attention to dropdown mount position in complex layouts
• Custom Styling: Use dropdownclass for style customization
• Disabled Options: Use disabled attribute for unavailable options