All Products
Search
Document Center

Option selector

Last Updated: Feb 04, 2021

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

 
  1. // API-DEMO page/API/options-select/options-select.json
  2. {
  3. "defaultTitle": "Option selector"
  4. }
 
  1. <!-- API-DEMO page/API/options-select/options-select.axml-->
  2. <view class="page">
  3. <view class="page-description">Option selector API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.optionsSelect</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="openOne">Single column selector</button>
  8. </view>
  9. <view class="page-section-demo">
  10. <button type="primary" onTap="openTwo">Double column selector</button>
  11. </view>
  12. </view>
  13. </view>
 
  1. // API-DEMO page/API/options-select/options-select.js
  2. Page({
  3. openOne() {
  4. my.optionsSelect({
  5. title: "Select the repayment date",
  6. optionsOne: ["Every Monday", "Every Tuesday", "Every Wednesday", "Every Thursday", "Every Friday", "Every Saturday", "Every Sunday"],
  7. selectedOneIndex: 2,
  8. success(res) {
  9. my.alert({
  10. content: JSON.stringify(res, null, 2),
  11. });
  12. }
  13. });
  14. },
  15. openTwo() {
  16. my.optionsSelect({
  17. title: "Select the year and month of birth",
  18. optionsOne: ["2014", "2013", "2012", "2011", "2010", "2009", "2008"],
  19. optionsTwo: ["January", 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  20. selectedOneIndex: 3,
  21. selectedTwoIndex: 5,
  22. success(res) {
  23. my.alert({
  24. content: JSON.stringify(res, null, 2),
  25. });
  26. }
  27. });
  28. },
  29. });

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.