移动设备上的多选 <select> 框答案

【问题标题】：Multi Select <select> box on mobile devices移动设备上的多选 <select> 框
【发布时间】：2012-12-09 06:53:31
【问题描述】：

我有一个界面，它使用具有 css 设置高度的多选列表框来填充其他列表。

基本上：

<select multiple="multiple" size="5" style="height:150px;">
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>    

</select>

<select multiple="multiple" style="height:150px;"></select>

使用 jQuery，基本上你选择了第一个中的一些东西，然后将它们移动到第二个。

这很好用，我们的用户喜欢在非移动环境中使用它。但是，在 android 平板电脑、手机、iphone 和 ipad 上，列表看起来是空的，直到您单击它并显示内置的滚动选择界面。因此，当它们添加到第二个列表时，您将看不到新的。

这个非常简单的 jsFiddle 显示了我正在谈论的内容，选择框没有显示它们的内容：

http://jsfiddle.net/VhXwA/2/

有没有一种方法可以覆盖这种行为，而不必制作我自己的自定义东西，或者对移动设备使用完全不同的方法？

如果没有办法做到这一点，那么实现类似移动设备友好的最佳方式是什么？

编辑：

这是此界面外观的基本图片，任一框中的列表可能很长或很短。但它们有一个固定的高度，以保持一致性：

编辑：我无法想象我是唯一遇到这种情况的人！必须有办法让移动浏览器正常运行。

【问题讨论】：

标签： android html mobile user-interface html-select

【解决方案1】：

移动浏览器中的这种行为旨在改善用户体验。根据Safari Web Content Guide

使用 Select 元素如果你在你的网页，iOS 会显示一个自定义选择控件，该控件已针对使用手指作为输入设备选择列表中的项目。在 iOS，用户可以轻弹滚动列表并点击选择一个项目从列表中。

这就是说：

我建议不要反对它，而是为了移动用户而利用它
使用媒体查询为桌面和移动设备的select 元素应用不同的 CSS 浏览器；
如果显示的选项数量足够少，请考虑使用<input type="checkbox">

而不是select，因为它的行为跨浏览器是一致的。

【讨论】：

复选框不是一个选项，因为它们也可以更改顺序，但单击向上/向下按钮并打开已选择的选项。

【解决方案2】：

据我了解，我认为根据选择的选项重定向到另一个页面会容易得多，除非你一开始没有选择此选项。

我不明白为什么你不能只使用复选框的下拉列表。它们几乎在任何地方都兼容，当然也可以在所有智能手机上兼容。

<select name="Dropdown1">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
<option value="o4">Option 4</option>
</select>

或者

<input type="checkbox" name="checkbox" value="o1">Option 1<br>
<input type="checkbox" name="checkbox" value="o2">Option 2

（http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2 和 http://www.w3schools.com/html/html_forms.asp）

【讨论】：

列表可能很长，复选框会很笨拙。他们还可以更改所选选项的顺序，因此复选框根本不起作用。
@Patricia 在某些网站上，下拉列表中可以列出数百个选项，例如当用户选择他们的国家时，因此下拉列表可以与任意数量的项目一起使用，真的。我不明白他们的问题是什么......
问题是，他们在移动界面上显示为EMPTY，直到他们被点击。并且它们以更用户友好（在某些情况下）的移动界面显示，其中是可滚动列表。对于多选，以及这个特定的界面。他们可以在哪里选择和删除，或者选择并上下移动。它根本不是用户友好的。
简而言之：因为是一个有序列表

【解决方案3】：

我一直在使用类似的界面，它非常适合桌面用户，但在多选不显示为多行可滚动列表的触摸设备上完全不直观。

您似乎需要一个完全自定义的控件，但我发现两个 Jquery 控件似乎实现了此功能（尽管方式略有不同）。

Eric Hynds Jquery UI 多选： http://comsim.esac.esa.int/rossim/3dtool/common/utils/jquery/ehynds-jquery-ui-multiselect-widget-f51f209/demos/index.htm

准 Partikels 可排序可搜索多选小部件： http://quasipartikel.at/multiselect/

这两者在手机大小的设备上都显得有些繁琐，尤其是 Quasi Partikel 版本，它使用项目左侧的小“+”来添加它，而 Eric Hynds 允许点击整个项目选择/取消选择。两者都可以通过特定于移动设备的样式进行改进，以增加我认为的关键元素的大小。

【讨论】：