Question

我正在尝试创建一个可选择的列表，显示为可滚动而不是下拉列表。下面的代码在PC /平板电脑浏览器中完美运行，但在移动设备上它提供了下拉菜单。是否可以强制滚动选项而不是移动设备上的下拉菜单？＆lt; div＆gt; ＆lt; select name =＆＃34; events＆＃34; ID =＆＃34;事件＆＃34;数据角色=＆＃34;无＆＃34; size = 25 style =＆＃34; width：27vw;高度：50vh＆＃34;＆GT; ＆LT;选项＆GT;选项1＆LT; /选项＆GT; ＆LT;选项＆GT;选项2＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; 看看显示问题的小提琴（尝试在手机中打开以了解问题）。或者，如果有更好的方法，我会批评/建议，这是我第一次冒险进入HTML ...

Answer 1

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

Answer 2

您的问题只是移动浏览器不尊重size标记的<select>属性。甚至桌面浏览器都有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>

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

如何防止<select>在移动浏览器上显示下拉列表

2 个答案: