Use actionSheet to implement a selection list - Mobile Platform as a Service

This API displays a list of options at the bottom of the screen.

Use the actionSheet API

AlipayJSBridge.call('actionSheet', {
  'title': 'Title',
  'btns': ['Button 1', 'Button 2', 'Button 3'],
  'cancelBtn': 'Cancel',
  'destructiveBtnIndex': 2
}, function(data) {
  switch (data.index) { // The index indicates the position of the button that the user clicks in the actionSheet. The index starts from 0.
    case 0:
      alert('Button 1');
      break;
    case 1:
      alert('Button 2');
      break;
    case 2:
      alert('Button 3');
      break;
    case 3:
      alert('Cancel button');
      break;
  }
});

Code sample

<h1>Click the button to open the actionSheet</h1>
<a href="javascript:void(0)" class="btn actionSheet">Open actionSheet</a>

<script>
function ready(callback) {
  // If AlipayJSBridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.actionSheet').addEventListener('click', function() {
    AlipayJSBridge.call('actionSheet',{
      'title': 'Title',
      'btns': ['Button 1', 'Button 2', 'Button 3'],
      'cancelBtn': 'Cancel',
      'destructiveBtnIndex': 2
    }, function(data) {
      switch (data.index) { // The index indicates the position of the button that the user clicks in the actionSheet. The index starts from 0.
        case 0:
          alert('Button 1');
          break;
        case 1:
          alert('Button 2');
          break;
        case 2:
          alert('Button 3');
          break;
        case 3:
          alert('Cancel button');
          break;
      }
    });
  });
});
</script>

API reference

AlipayJSBridge.call('actionSheet',{
  title, btns, cancelBtn, destructiveBtnIndex
}, fn)

Input parameters

Property	Type	Description	Required	Default value
title	string	The title.	No.	""
btns	array	An array of buttons. Each item is a string.	Yes	[]
cancelBtn	string	You can set the text for the cancel button.	N	""
destructiveBtnIndex	int	The index of a button that receives special handling on iOS. The index starts from 0. Used for scenarios such as deleting or purging data. The button is red by default.	N	-
fn	function	A callback function that is invoked when the user selects an option.	N	-

Output parameters

The response is returned in the format {data: {index: 0}}, where the index parameter indicates the zero-based position of the button that the user clicked.