showPicker()方法与下拉列表的显示演示页面

展示

代码

• HTML：

  <button id="button" class="ui-select-button">
      <span class="ui-select-text">请选择</span>
  </button>
  <select id="select">
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
  </select>

• CSS：

  /* 这里为了兼容PC端演示才这么设置，实际上，在移动端，随便塞在什么用户看不见的地方就好了 */
  select {
      display: block;
      height: 28px;
      margin: -30px auto 0;
      opacity: 0;
  }

• JS：

  button.onclick = function () {
      select.showPicker();
  }
  select.onchange = function () {
      button.firstElementChild.textContent = select[select.selectedIndex].text;
  }