使用popover属性模拟下拉弹层演示页面

展示

代码

• HTML：

  <div class="ui-select">
      <button is="ui-select" popovertarget="selectPopover">点击我</button>
      <select is="ui-select" popup>
          <option>请选择</option>
          <option>选项1</option>
          <option>选项2</option>
      </select>
  </div>
  
  <ui-popup-container id="selectPopover" popover>
      <form id="form">
          <ui-list-item><input type="radio" name="n1" value="请选择" checked data-index="0">请选择</ui-list-item>
          <ui-list-item><input type="radio" name="n1" value="选项1" data-index="1">选项1</ui-list-item>
          <ui-list-item><input type="radio" name="n1" value="选项2" data-index="2">选项2</ui-list-item>
      </form>
  </ui-popup-container>

• JS：

  form.onchange = function () {
      const input = form.querySelector('input:checked');
      const select = document.querySelector('select');
      select.selectedIndex = input.dataset.index;
      select.dispatchEvent(new Event('change'));
      // 关闭弹层
      selectPopover.hidePopover();
  }