All Products
Search
Document Center

Mobile Platform as a Service:Option selector

Last Updated:Nov 24, 2022

my.optionsSelect

A component similar to the native Safari select but with more powerful features, which you can use to replace the native select or level 2 data. Note: The component does not support interactions among level 2 data.

Effect

options select

Sample code

// API-DEMO page/API/options-select/options-select.json
{
     "defaultTitle": "Option selector"
}
<!-- API-DEMO page/API/options-select/options-select.axml-->
<view class="page">
  <view class="page-description">Option selector API</view>
  <view class="page-section">
    <view class="page-section-title">my.optionsSelect</view>
    <view class="page-section-demo">
      <button type="primary" onTap="openOne">Single column selector</button>
    </view>
    <view class="page-section-demo">
      <button type="primary" onTap="openTwo">Double column selector</button>
    </view>
  </view>
</view>
// API-DEMO page/API/options-select/options-select.js
Page({
  openOne() {
    my.optionsSelect({
      title: "Select the repayment date",
      optionsOne: ["Every Monday", "Every Tuesday", "Every Wednesday", "Every Thursday", "Every Friday", "Every Saturday", "Every Sunday"],
      selectedOneIndex: 2,
      success(res) {
        my.alert({
          content: JSON.stringify(res, null, 2),
        });
      }
    });
  },
  openTwo() {
    my.optionsSelect({
      title: "Select the year and month of birth",
      optionsOne: ["2014", "2013", "2012", "2011", "2010", "2009", "2008"],
      optionsTwo: ["January", 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      selectedOneIndex: 3,
      selectedTwoIndex: 5,
      success(res) {
        my.alert({
          content: JSON.stringify(res, null, 2),
        });
      }
    });
  },
});

Parameters

The input parameters are in Object type and have the following attributes:

Name

Type

Description

Required

Default value

title

String

Header title information

No

-

optionsOne

String[]

List for option one

Required

-

optionsTwo

String[]

List for option two

No

-

selectedOneIndex

Number

It means option one is selected by default.

No

0

selectedTwoIndex

Number

It means option two is selected by default.

No

0

positiveString

String

The text that is displayed on the Confirm button

No

Confirm

negativeString

String

The text that is displayed on the Cancel button

No

Cancel

Callback function upon success

The input parameters are in Object type and have the following attributes:

Name

Type

Description

Remarks

selectedOneIndex

Number

Selected value in option one

If you cancel the selection, an empty string will be returned.

selectedOneOption

String

Selected content in option one

If you cancel the selection, an empty string will be returned.

selectedTwoIndex

Number

Selected value in option two

If you cancel the selection, an empty string will be returned.

selectedTwoOption

String

Selected content in option two

If you cancel the selection, an empty string will be returned.