Android 多选<；选择>；移动设备上的机顶盒

我有一个界面，它使用具有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>

一
二
三
4

使用jQuery，基本上可以在第一个查询中选择一些内容，然后将它们移动到第二个查询中

这非常有效，我们的用户喜欢在非移动环境中使用它。但是，在安卓平板电脑、手机、iPhone和iPad上，列表看起来是空的，直到你点击并显示内置的滚动选择界面。因此，当新列表添加到第二个列表中时，您无法看到它们

这个非常简单的JSFIDLE显示了我所说的选择框不显示其内容：

有没有一种方法可以在不必自己定制的情况下覆盖这种行为，或者对移动设备使用完全不同的方法

如果没有一种方法可以做到这一点，那么实现类似于移动友好的东西的最佳方法是什么

编辑：

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

编辑：

---

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

移动浏览器中的这种行为是为了改善用户体验而设计的。据

如果在应用程序中使用Select HTML元素，请使用Select元素 在网页中，iOS显示一个自定义选择控件，该控件针对 使用手指作为输入设备在列表中选择项目。在…上 在iOS操作系统中，用户可以轻弹滚动列表并点击以选择项目 从列表中删除

这就是说：

• 我建议不要与之抗争，而是为了移动用户而利用它

• 使用媒体查询为桌面和移动设备的

  选择
  元素应用不同的css
  浏览器
  
  

＞P>如果显示的选项数足够小，请考虑使用<代码> <代码> < /P> 不要选择

，而是选择
，因为它的行为在不同浏览器中是一致的

据我所知，我认为根据选择的选项重定向到另一个页面要容易得多，除非你当初没有选择这个选项是有原因的

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

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

选择1
选择2
选择3
选择4

或

选项1

选择2

---

（和）

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

看起来您需要一个完全定制的控件，但我发现两个Jquery控件似乎实现了这一功能（尽管方式略有不同）

Eric Hynds Jquery UI multiselect：

准Partikels可排序可搜索多选小部件：

---

这两个选项在手机大小的设备上都有点复杂，但特别是准Partikel版本，它使用项目左侧的一个小“+”来添加它，而Eric Hynds允许点击整个项目来选择/取消选择。这两种方法都可以通过特定于移动设备的样式进行改进，以增加关键元素的大小。

列表可能很长，复选框会很难操作。他们还可以更改所选选项的顺序，因此复选框根本不起作用。@Patricia在一些网站上，数百个选项可以列在下拉列表上，就像用户选择国家一样，因此下拉列表可以用于任何数量的项目，真的。我看不出它们有什么问题……问题是，它们在移动界面上显示为空，直到它们被点击。而且，它们会显示更为用户友好的（在某些情况下）移动界面，其中有一个可滚动列表。对于multi-select，以及此特定接口。他们可以在其中选择并删除，或选择并上下移动。简而言之：因为是一个有序的列表复选框不是一个选项，因为它们也可以更改顺序，但单击向上/向下按钮打开选中的选项。

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