HTML <select>元素在iPhone或Android浏览器中缩写</select>

Question

当我的HTML ＆lt; select＆gt; 下拉菜单显示在iPhone或Android浏览器中时，我会遇到一些情况。我经常需要渲染很长的＆lt; option＆gt; 标签，例如

  

[AccountType] [EUR] - [客户] - CH12 3456 7890 1234 5678 9

在Android上，这将呈现类似的内容：

  

在iPhone上，情况更糟。虽然我喜欢原生的外观和感觉，但标签的裁剪是不可取的。用红色圆圈，你会发现下拉本身是如何呈现的。我可以忍受这个。但是当我点击它时，看看出现的蓝色弹出窗口。用户永远不会找到他的数据......

请在回答之前......

......考虑以下几点：

• 我可以缩写一些信息，但我仍然会在select中包含长选项标签的情况。因此，无需告诉我IBAN可以缩写等等。
• 我不能依赖＆lt; select＆gt; 或＆lt; option＆gt; 元素的CSS样式。
• 用户猎人已经提出了＆lt; optgroup＆gt; 标记here。这是一个非常好的主意，并且将是一个小的解决方法，但还不够，因为iPhone和Android浏览器仍在裁剪IBAN： - （
• 我已经知道非常漂亮{​​{3}}了。不幸的是，它还没有与jquery-ui 1.8.5兼容，并且无法保证它何时稳定。
• 我使用的是jquery和jquery-ui 1.8.5，所以非常欢迎任何插件的想法/参考。
• 欢迎任何其他想法来解决这个问题一般。

Answer 1

您是否可以创建option组以最小化冗余文本？

<option value="-1">[AccountType] [EUR] - [Customer]</option>
<option value="1">CH12 3456 7890 1234 5678 9</option>
<option value="2">CH10 1111 2222 3333 4444 5</option>

然后使用jQuery

使value="-1"无法选择

或者您可以使用optgroup元素进行组织

<optgroup label="[AccountType] [EUR] - [Customer]">
    <option value="1">CH12 3456 7890 1234 5678 9</option>
    <option value="2">CH10 1111 2222 3333 4444 5</option>
</optgroup>    

Answer 2

我遇到了同样的问题。我想要一个类似于jQuery UI组合框的仿制下拉框，但我不想使用jQuery UI，所以我使用了其他jQuery selectbox plugin。它有些错误，但比我的默认iPhone选择元素更好。

Answer 3

Answer 4

虽然 hunter 和 Ivan Buttinoni 提出的解决方案具有创造性和好主意，但我最终必须找到不同的解决方案。它现在看起来类似于jQuery UI的组合框组件：

http://jqueryui.com/demos/autocomplete/#combobox