如何防止 <select> 在移动浏览器上显示下拉菜单答案

【问题标题】：How to prevent <select> showing a drop down on mobile browser如何防止 <select> 在移动浏览器上显示下拉菜单
【发布时间】：2017-11-13 13:06:11
【问题描述】：

我正在尝试创建一个显示为可滚动而不是下拉列表的可选列表。

下面的代码在个人电脑/平板电脑浏览器中完美运行，但在移动设备上它提供了一个下拉菜单。

是否可以在移动设备上强制滚动选项而不是下拉选项？

<div >
    <select name="events" id="events" data-role="none" size=25 style="width:27vw; height:50vh">
        <option>Option1</option>
        <option>Option2</option>
    </select>
</div>

查看显示问题的fiddle（尝试在手机中打开以了解问题）。

如果有更好的方法，我愿意接受批评/建议，这是我第一次尝试 html...

【问题讨论】：

标签： html

【解决方案1】：

您需要使用 plugin 将经典的 select 转换为 html 元素，以根据需要自定义 select。

【讨论】：

感谢您的建议，但我认为另一个答案是我想要的（在决定之前我都尝试过）。

【解决方案2】：

您的问题只是移动浏览器不尊重<select> 标签的size 属性。甚至桌面浏览器都有historically had trouble with it。

除了不依赖该属性之外，您实际上无能为力。在 JavaScript 中创建这种控件并不是特别困难。您可以使用媒体查询来决定是显示 JavaScript 版本（移动）还是 <select> 版本（桌面）。

$('ul.select li').click(function(e){
  var item = $(e.target);
  item.addClass('selected');
  item.siblings().removeClass('selected');
  $('#events').val(item.text());
});

ul.select {
   list-style: none;
   margin:  0;
   padding: 2px;
   border: 1px solid grey;
}

ul.select li {
   padding: 2px 6px;
}
ul.select li:hover {
   cursor: pointer;
}
ul.select li.selected {
   background-color: blue;
   color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="events" type="hidden" name="events" value="">

<ul class="select">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

我还要指出，移动浏览器故意显示下拉菜单的方式是为了改善用户体验。在尝试颠覆之前我会三思而后行。

【讨论】：

也感谢您解释为什么做我想做的事情是个坏主意。