Select

Rule

Basic Example

const rule = {
    type: 'select',
    title: 'Dropdown Selection',
    field: 'select',
    value: 'Wednesday',
    props: {
        title: 'Appointment',
        options: [
            { text: 'Monday', value: 'Monday' },
            { text: 'Tuesday', value: 'Tuesday' },
            { text: 'Wednesday', value: 'Wednesday' },
            { text: 'Thursday', value: 'Thursday' },
            { text: 'Friday', value: 'Friday' },
        ],
        placeholder: 'Select',
    }
}

Props Configuration Examples

Single Selection Dropdown

const rule = {
    type: 'select',
    title: 'Product Category',
    field: 'category',
    value: '1',
    props: {
        title: 'Select Category',
        options: [
            { text: 'Electronics', value: '1' },
            { text: 'Clothing & Accessories', value: '2' },
            { text: 'Home Goods', value: '3' },
        ],
        placeholder: 'Please select category',
    }
}

Multi-Column Selection

const rule = {
    type: 'select',
    title: 'Province/City/District',
    field: 'address',
    value: [],
    props: {
        title: 'Select Address',
        options: [
            [
                { text: 'Zhejiang', value: 'zhejiang' },
                { text: 'Fujian', value: 'fujian' },
            ],
            [
                { text: 'Hangzhou', value: 'hangzhou' },
                { text: 'Wenzhou', value: 'wenzhou' },
            ],
            [
                { text: 'Xihu District', value: 'xihu' },
                { text: 'Yuhang District', value: 'yuhang' },
            ],
        ],
    }
}

Custom Button Text

const rule = {
    type: 'select',
    title: 'Appointment Time',
    field: 'time',
    value: '',
    props: {
        title: 'Select Time',
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        options: [
            { text: '09:00', value: '09:00' },
            { text: '10:00', value: '10:00' },
            { text: '11:00', value: '11:00' },
        ],
    }
}

Events Examples

Handle Selection Changes

const rule = {
    type: 'select',
    title: 'Dropdown Selection',
    field: 'select',
    value: '',
    props: {
        title: 'Appointment',
        options: [
            { text: 'Monday', value: 'Monday' },
            { text: 'Tuesday', value: 'Tuesday' },
        ],
        placeholder: 'Select',
    },
    on: {
        confirm: (result) => {
            console.log('Confirmed selection:', result);
        },
        cancel: () => {
            console.log('Cancelled selection');
        },
        change: (result) => {
            console.log('Selection changed:', result);
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type: 'select',
        title: 'Product Category',
        field: 'category',
        value: '',
        props: {
            title: 'Select Category',
            options: [
                { text: 'Electronics', value: '1' },
                { text: 'Clothing & Accessories', value: '2' },
            ],
        },
        inject: true,
        on: {
            confirm: ($inject, result) => {
                // Load subcategories based on selection
                const value = result.selectedValues[0];
                if (value === '1') {
                    $inject.api.updateRule('subcategory', {
                        props: {
                            options: [
                                { text: 'Mobile Phone', value: '11' },
                                { text: 'Computer', value: '12' },
                            ]
                        }
                    });
                } else if (value === '2') {
                    $inject.api.updateRule('subcategory', {
                        props: {
                            options: [
                                { text: 'Men\'s Clothing', value: '21' },
                                { text: 'Women\'s Clothing', value: '22' },
                            ]
                        }
                    });
                }
            },
        },
    },
    {
        type: 'select',
        title: 'Subcategory',
        field: 'subcategory',
        props: {
            title: 'Select Subcategory',
            options: [],
            placeholder: 'Please select category first',
            disabled: true,
        },
    },
]

Complete configuration items:Vant_Picker

value :Number | String

Options

Field Name	Description	Field Type	Required	Default Value
value	Parameter value	String,Number	true	-
text	Field alias	String	true	-
disabled	Set to disabled state	Boolean	false	false

Props

Parameter	Description	Type	Default Value
disabled	Whether to disable input	boolean	false
options	Array of objects, configure data displayed in each column	PickerOption[] | PickerOption[][]	[]
columns-field-names	Custom fields in options structure	object	{ text: 'text', value: 'value', children: 'children' }
title	Top bar title	string	-
confirm-button-text	Confirm button text, set to empty string to hide button	string	Confirm
cancel-button-text	Cancel button text, set to empty string to hide button	string	Cancel
toolbar-position	Top bar position, optional value is bottom	string	top
loading	Whether to show loading state	boolean	false
readonly	Whether it is in readonly state, cannot switch options in readonly state	boolean	false
show-toolbar	Whether to show top bar	boolean	true
allow-html	Whether to allow rendering HTML in option content	boolean	false
option-height	Option height, supports px vw vh rem units, default px	number | string	44
visible-option-num	Number of visible options	number | string	6
swipe-duration	Duration of inertial scrolling when swiping quickly, unit ms	number | string	1000

Events

Event Name	Description	Callback Parameters
confirm	Triggered when confirm button is clicked	{ selectedValues, selectedOptions, selectedIndexes }
cancel	Triggered when cancel button is clicked	{ selectedValues, selectedOptions, selectedIndexes }
change	Triggered when selected option changes	{ selectedValues, selectedOptions, selectedIndexes, columnIndex }
click-option	Triggered when option is clicked	{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }
scrollInto	Triggered when user scrolls an option to the middle selection area by clicking or dragging	{ currentOption, columnIndex }