select

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The <select> component provides a drop-down list that allows users to select among multiple options.

Child Components

The <option> child component is supported.

Attributes

The universal attributes are supported.

Ad Asset

In addition to the universal styles, the following styles are supported.

Name	Type	Mandatory	Description
font-family	string	No	Font family, in which fonts are separated by commas (,). The first font in the family or the specified custom font is used for the text. Default value: sans-serif

Events

In addition to the universal events, the following events are supported.

Name	Parameter	Description
change	{newValue: newValue}	Triggered when an option is selected from the drop-down list to return an object. The value of newValue is the value of the selected option.

NOTE

The <select> component does not support the click event.

Methods

The universal methods are supported.

Example

<!-- xxx.hml -->
<div class="container">
    <select @change="onChange">
        <option for="{{ array }}" value="{{ $item.value }}">
            {{ $item.name }}
        </option>
    </select>
</div>

/* xxx.css */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

// xxx.js
export default {
    data: {
        array: [
            {
                "value": "Option 0", "name": "Option 0"
            },
            {
                "value": "Option 1", "name": "Option 1"
            },
            {
                "value": "Option 2", "name": "Option 2"
            },
            {
                "value": "Option 3", "name": "Option 3"
            },
        ]
    },
    getData() {
        let other = [
            {
                "value": "Option A", "name": "Option A"
            },
            {
                "value": "Option B", "name": "Option B"
            },
            {
                "value": "Option C", "name": "Option C"
            },
            {
                "value": "Option D", "name": "Option D"
            },
        ]
        return other
    },
    onChange() {
        this.array = this.getData()
    }
}

en-us_image_0000001152588538