Skip to main content
Supported Regions:上海

Dropdown Multi-select

WdSelectMultiple

Applicable Scenarios​

Display options in a list format, allowing users to perform multiple selections.

Basic Capabilities​

Option Configuration Instructions​

Supports manual configuration of option lists, entering values and names

Image a7e6c7971857a4c5db2beab953b17da7

Selected Value Property Description​

  1. The selected value property represents the component's default form value, which can be bound to variables or expressions to implement dynamic changes to the selected value.Image 9e8e1b835aee54fd87acc4fea9554a8f
  2. The selected value must be filled with the corresponding option value; entering option names is invalid.

Extended Scenarios​

Generating Dynamic Option Lists via Query​

Using class data as an example, configure a dynamic option list for dropdown single-select/multi-select components.

  1. Create a class data model with a class name field.

    Image 32db67c80574f3b6e048f56d1da2d459

  2. In the Data Management Backend, enter sample values for several classes in this model (note the data environment in the top-left corner of the backend: trial data is only available in the editor development preview and trial version applications; for production applications, formal data must be entered in advance)

    Image 495962a306ad3bd0a37615d9e6d63d94

  3. In the code area at the bottom left of the editor, click the '+' to create a new WeDa data table query. After completing the configuration below, click the save button in the top right corner.

    1. Data table: select the previously created class model.

    2. Trigger Method: Select to automatically execute when input parameters change (executes automatically once upon page load to retrieve relevant data)

    3. Filter conditions, sorting methods: Can be configured as needed or left blank Image 2ffdaddd204e574f5e59b08f5d5ac464 Image 187a83afeb2857cf63639ed42334aef7

  4. Click the data binding mode button on the right side of the dropdown radio/dropdown multiple selection component options properties.

    Image 6e33ffc9b0e78eedc2d7e552ac12221a

  5. Click the data binding button on the right side of the variable property to bind it to $w.query1.data.records

    Image 69fb222c4e46b5152ac34ead8799b5eaImage aee273af197d24eb9bad01e4e73590e5

  6. For the label name and label value properties, select or enter the field identifier of the class name field in the data model.

    Image 8237d40afd789ce62d3d22e05f4739eb

  7. After completing the above configuration, the option lists of the dropdown radio/dropdown multiple selection components can load and display data from the data model, achieving dynamic control of the option lists.

    Image fe77d0f52a3ede4ed8ad2e2e9d14162cImage cf75d7d2eeea2d04640f26730b8f4d4b

Practices for Other Scenarios​

Refer to the Form Scenario Practice Guide to explore various supported scenarios and implementation solutions for forms.

Example​

Interactive Preview​

Component Input Status​

Style API Example​

#wd-page-root .wd-form-item .wd-select-multiple-select-multiple {
  border-color: cyan;
  color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Display HeadlineslabelVisibleboolean

Default value: true

Title alignmentlabelAlignstring

In the scenario, the form by default follows the title alignment configuration of the form container.

Line break in headinglabelWrapboolean

If the title content is too long when closed, show one line with overflow omitted; when enabled, show with line breaks. In form scenarios, it follows the form container's title line break configuration by default.

Title positionlayoutstring

Set title display position in form component. In the scenario, it follows the title position configuration of the form container by default.

Title widthlabelWidthstring

You can enter a value with units such as px or %, for example: 200px.

In the scenario, the form follows the title width configuration of the form container by default.

Heading NotelabelTipsstring

Take effect on PC/H5

Configure tooltip content for the heading

Display clear buttonclearableboolean

Enabled, quick clear button is provided by

Default value: true

Prefix textbeforestring

The input box in the form displays the prefix text. In the form submission scenario, the prefix text is submitted as part of the form content to the data model.

suffix textafterstring

The input box in the form displays suffix text. In the scenario of form submission, the suffix text is submitted as form content to the data model together.

Prefix icon typeprefixTypestring

Select icon type

Example: ""

Prefix iconprefixIconstring

Show icon before the form input box

Example: "success"

Prefix iconprefixSrcstring

Set custom icon address

suffix icon typesuffixTypestring

Select icon type

Example: "fixed"

suffix iconsuffixIconstring

Show icon in the form input box

Example: "success"

suffix iconsuffixSrcstring

Set custom icon address

Prompt.extrastring

The prompt content is displayed below the input box after configuration.

Display underscore on mobile terminalborderedH5boolean

After closing, the mobile terminal does not show the bottom underline

Default value: true

Display input border on PCborderedPcboolean

After closing, do not display input border on PC

Default value: true

Status.statusstring

Example: "edit"

Requiredrequiredboolean
Required identifierrequiredFlagboolean

Enabled, the component will display a required asterisk tag if mandatory.

Default value: true

Required validation noterequiredMsgstring

Example: "该项为必填项"

Bound fieldnamestring

The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.

Title content.labelstring

Example: "下拉多选"

Optionrangearray

Option List

Example: [ { "label": "选项名称", "value": "选项值" } ]

OptiontipBlockstring
Upgrade filtersupportManyRelatedboolean

When enabled, the filter supports customizable criteria

Example: false

Filter optionswherearray

Default value: []

data filterqueryConditionobject

Click fx to support editing data filter expressions View format

Filter data

Example: true

data sortingsorterarray

可设置数据排序规则，支持拖拽调整排序优先级，数组下标越小优先级越高。绑定数据示例：[{"orderBy":"updatedAt","orderType":"desc"}],升序传值asc，降序传值desc

Example: [ { "orderBy": "updatedAt", "orderType": "desc", "label": "更新时间" } ]

selected valuevaluearray

Default selected option

Default value: []

Option nameselectFieldLabelstring

Default display of primary column field

Example: ""

Display contentselectFieldTypestring

Take effect on PC/H5

Default display of primary column field

Default value: "primary"

Custom selection auxiliary fieldselectFieldsarray
PC component dimensionsizestring

Size configuration is only applicable to PC and takes effect by default in form container scenarios.

Placeholder textplaceholderstring

Example: "请选择"

supports searchsearchableboolean

Default value: true

Search box placeholder textsearchPlaceholderstring

Example: "搜索选项"

Disable frontend filteringfilterableboolean

Filter by default based on the search bar input value. When enabled, block frontend filtering.

refresh buttonenableRelationalRefreshboolean

Take effect on PC/H5

Click refresh to update the drop-down list data. The refresh button is configurable and shown in edit mode only when options come from the association field.

Default value: true

Set buttonenableRelationalSettingboolean

Event response when enabled: onSettingButtonClick. Takes effect on PC/H5.

Only when the option comes from an association field, the configuration button is supported and shown in edit mode.

Dropdown option redirect buttonenableRelationOptionJumpboolean

Event response when enabled: onRelationOptionJump. Takes effect on PC/H5.

Only when the option comes from an association field, the dropdown option redirection button is supported and shown in edit mode. It takes effect on both PC and H5.

new buttonenableAddRelationButtonboolean

Event response when enabled: onAddRelationButtonClick. Takes effect on PC/H5.

Only when the option comes from an association field, the new button is supported and shown in edit mode. It takes effect on both PC and H5.

Create button textaddRelationButtonTextstring

Take effect on PC/H5.

Default value: "去新建"

Tag displayenableRelationTagboolean

Event response when enabled: onRelationTagClick. Takes effect on PC/H5.

Only when the option comes from an association field, the component can be configured to show as a Tag in read-only status. It takes effect on PC/H5.

Default value: true

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
value changechangeobject
  • value: array值

    默认选中的选项
    • stringvalue
  • context: object

    此次变更的更多上下文信息，其中 context.options 可以获得选中项的值
    • options: object

      选中值
    		Compatible with all platforms

    Trigger when a user modifies a component value

    Enter the content to searchsearchobject
    • value: string搜索框输入值
    		Compatible with all platforms

    -

    focusfocusCompatible with all platforms

    -

    Out of focusblurMobile,PC

    -

    Click the set buttononSettingButtonClickMobile,PC

    -

    Click the New buttononAddRelationButtonClickMobile,PC

    -

    Click TagonRelationTagClickobject
    • item: object 选项值
      • label: string
      • value: string
    		Mobile,PC

    -

    Click Custom Association Dropdown option RedirectonRelationOptionJumpobject
    • item: object 选项值
      • label: string
      • value: string
    		Mobile,PC

    -

    Properties API​

    Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

    Read-only Property Name
    Property Identifier
    Type
    Description
    Bound fieldnamestring

    The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.

    Title content.labelstring
    selected valuevaluearray

    Default selected option

    Prefix textbeforestring

    The input box in the form displays the prefix text. In the form submission scenario, the prefix text is submitted as part of the form content to the data model.

    suffix textafterstring

    The input box in the form displays suffix text. In the scenario of form submission, the suffix text is submitted as form content to the data model together.

    Requiredrequiredboolean
    Indicates whether to displayvisibleboolean

    Whether to display the component

    Whether to disabledisabledboolean

    Component Disabled

    Specify whether it is read-only or not.readOnlyboolean

    Whether the component is read-only

    Select Item NameselectedLabelstring

    Selected Item Text Name

    selected itemitemarray

    selected item object

    Method API​

    Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

    Method Name
    Method Identifier
    Parameters
    Method Description
    set valuesetValueobject
    • value: array值

      默认选中的选项
      • stringvalue

    通过 $w.id1.setValue("weda") 设置组件值

    Show/Hide SettingssetVisibleboolean显示

    Set the component to hidden via $w.id1.setVisible(false)

    Set DisabledsetDisabledboolean禁用

    Set the component to disabled with $w.id1.setDisabled(true)

    Clear valueclearValue

    Clear the component value with $w.id1.clearValue()

    Set as read-onlysetReadOnlyboolean只读

    Set the component to read-only via $w.id1.setReadOnly(true)

    Trigger validationhandleValidate

    Validate the component value via $w.id1.handleValidate()

    Clear verificationclearValidate

    Clear component validation via $w.id1.clearValidate()

    Style API​

    Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

    Name
    Class Name
    Description and Examples
    root element.wd-select-multiple-rootOutermost component element
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-select-multiple-root {
  /* Write CSS styles here */
}
    H5 root element.wd-h5-select-multiple-rootSettable root element style for the H5 side
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-select-multiple-root {
  /* Write CSS styles here */
}
    PC-side root element.wd-pc-select-multiple-rootSettable root element style for the PC side
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-select-multiple-root {
  /* Write CSS styles here */
}
    Mini program root element.wd-mp-select-multiple-rootSettable root element style for mini program
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-select-multiple-root {
  /* Write CSS styles here */
}
    Component title style.wd-select-multiple-root .wd-form-item-wrap__labelComponent title element
    
:scope .wd-form-item-wrap__label {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
    form control root node style.wd-select-multiple-root .wd-form-item-wrap__controlSet form control root element style
    
:scope .wd-form-item-wrap__control {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
    编辑态-选择框样式.wd-select-multiple-root .wd-form-input-wrapComponent border, margin style, background color, font size, font color
    
:scope .wd-form-input-wrap {
  font-size: 20px;
  color: gray;
  text-align: right;
  height: 40px;
  width: 100%;
  background-color: lightgray;
  border-width: 2px;
  border-color: gray;
  border-radius: 0px;
}
    编辑态-选择框样式（获取焦点）.wd-select-multiple-root .wd-form-input-wrap.is-focused编辑态-选择框样式（获取焦点）
    
:scope .wd-form-input-wrap.is-focused {
  background-color: lightgray;
  border-color: gray;
}
    Editing status - Placeholder text style.wd-select-multiple-root .select-multiple__placeholder div, .wd-select-multiple-root input::placeholder, .wd-select-multiple-root .weui-input__placeholderSet placeholder text style
    
    :scope .select-multiple__placeholder div, :scope input::placeholder, :scope .weui-input__placeholder{
      color: lightgray !important;
    }
    Editing status - Verification information.wd-select-multiple-root .wd-g-text-errorSet component verification information style
    
:scope .wd-g-text-error {
    font-size: 20px;
    color: gray;
  }
    prompt text.wd-select-multiple-root .wd-form-item__help-textSet the text style of the component prompt
    
:scope .wd-form-item__help-text {
    font-size: 20px;
    color: gray;
  }
    禁用态-选择框样式.wd-select-multiple-root .wd-form-input-wrap.is-disabledComponent disabled style
    
:scope .wd-form-input-wrap.is-disabled {
    font-size: 20px;
    color: gray;
    text-align: right;
    height: 40px;
    width: 200px;
    background-color: lightgray;
    border-width: 2px;
    border-color: gray;
    border-radius: 10px;
  }
    read-only status - form value style.wd-select-multiple-root .wd-form-item__readonly-valueSet component read-only status
    
:scope .wd-form-item__readonly-value {
    font-size: 20px;
    color: gray;
  }
    Prefix text style.wd-select-multiple-root .wd-form-input-group__addon-leftSet component prefix text style
    
:scope .wd-form-input-group__addon-left {
    font-size: 20px;
    color: gray;
    height: 40px;
    background-color: lightgray;
  }
/* 仅PC端生效 */
:scope.wd-pc-select-multiple-root .wd-form-input-group__addon-left {
    border-width: 2px;
    border-color: gray;
    border-radius: 10px 0 0 10px;
}
    Suffix text style.wd-select-multiple-root .wd-form-input-group__addon-rightSet component suffix text style
    
:scope .wd-form-input-group__addon-right {
    font-size: 20px;
    color: gray;
    height: 40px;
    background-color: lightgray;
  }
/* 仅PC端生效 */
:scope.wd-pc-select-multiple-root .wd-form-input-group__addon-right {
    border-width: 2px;
    border-color: gray;
    border-radius: 10px 0 0 10px;
}
    Mobile terminal drop-down list options.wd-select-modal .wd-select-list .wd-select-list-itemSet mobile terminal dropdown menu style
    
.wd-select-modal .wd-select-list .wd-select-list-item{
  color: lightgray ;
  font-size: 16px ;
  height: 50px ;
}

    Learn about Style API

    Version Changes​

    1. Standardized Component Upgrade​

    • Property Changes
    • Style Changes
    • widget api Changes

    2. feature upgrade​

    After upgrading to component version 3.15, the Dropdown Single/Multi Select components with bound associations in forms now support data sorting, feature an enhanced filter, and offer case-insensitive search.

    • Queries are sorted in descending order by update time by default.
    • After clicking to upgrade the filter, if filtering rules were previously configured, they need to be reconfigured.
    • Searches are case-insensitive by default.
    Image 7de0a95b4aeb65df263b3d2da7b8584e