多选在移动设备上<选择>框</select>

Question

我有一个界面，它使用具有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和ipads上，列表看起来是空的，直到你点击它，它显示了内置的滚动选择界面。因此，当它们被添加到第二个列表时，您无法看到新的。

这个非常简单的jsFiddle用不显示其内容的选择框显示我正在谈论的内容：

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

有没有办法覆盖这种行为而不必自己定制，或者使用完全不同的方式为移动设备执行此操作？

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

编辑：

以下是该界面外观的基本图片，两个框中的列表可能很长或很短。但为了保持一致，他们有一个设定的高度：

编辑： 我无法想象我是唯一一个遇到这个的人！必须有一种方法可以使移动浏览器正常运行。

Answer 1

移动浏览器中的此行为旨在改善用户体验。根据{{​​3}}

  

使用选择元素如果您使用选择HTML元素   网页，iOS会显示针对其进行优化的自定义选择控件   使用手指作为输入设备选择列表中的项目。上   iOS，用户可以轻弹以滚动列表并点击以选择项目   从列表中。

这就是说：

• 我建议不要打架，但要为移动用户利用它
• 使用媒体查询为桌面和移动设备的select元素应用不同的css 浏览器;

• 如果显示的选项数量足够小，请考虑使用<input type="checkbox">

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

Answer 2

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

好像你需要一个完全自定义的控件，但我发现两个Jquery控件似乎实现了这个功能（虽然方式略有不同）。

Eric Hynds Jquery UI multiselect： http://www.erichynds.com/blog/jquery-ui-multiselect-widget

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

这些都在手机大小的设备上看起来有点小巧，但特别是Quasi Partikel版本在项目的左边使用了一个小的“+”来添加它，而Eric Hynds允许整个项目被点击到选择/取消。可以通过移动特定样式来改进，以增加我想的关键元素的大小。

Answer 3

根据我的理解，我认为根据所选的选项重定向到另一个页面要容易得多，除非你有一个理由不首先选择这个。

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

<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）