多選<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 和 ipad 上，列表看起來是空的，直到您單擊並顯示內置的滾動選擇界面。 所以當它們被添加到第二個列表時你看不到新的。

這個非常簡單的 jsFiddle 顯示了我正在談論的選擇框不顯示它們的內容：

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

有沒有辦法覆蓋這種行為而不必制作我自己的自定義東西，或者對移動設備使用完全不同的方式來做到這一點？

如果沒有辦法做到這一點，那么實現類似移動友好的東西的最佳方法是什么？

編輯：

這是此界面外觀的基本圖片，任一框中的列表可能很長或很短。 但它們有一個固定的高度，以保持一致性：

編輯：我無法想象我是唯一遇到這種情況的人！ 必須有一種方法可以使移動瀏覽器正常運行。

Answer 1

移動瀏覽器中的這種行為是為了改善用戶體驗而設計的。 根據Safari Web 內容指南

使用 Select 元素 如果您在網頁中使用 select HTML 元素，iOS 會顯示一個自定義選擇控件，該控件針對使用手指作為輸入設備選擇列表中的項目進行了優化。 在 iOS 上，用戶可以滑動以滾動列表，然后點擊以從列表中選擇一個項目。

這是說：

• 我建議不要對抗它，而是為了移動用戶而利用它

• 使用媒體查詢為桌面和移動瀏覽器的select元素應用不同的 css；

• 如果顯示的選項數量足夠小，請考慮使用<input type="checkbox">

  而不是select因為它的行為在瀏覽器中是一致的。

Answer 2

我一直在使用類似的界面，它對桌面用戶非常有用，但在多選不顯示為多行可滾動列表的觸摸設備上完全不直觀。

看起來您需要一個完全自定義的控件，但我發現有兩個 Jquery 控件似乎實現了此功能（盡管方式略有不同）。

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

准粒子可排序可搜索多選小部件： 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 ）