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

Question

当我们的HTML <select>下拉列表显示在iPhone或Android浏览器中时,我处于某种情况.我经常需要渲染很长的<option>标签,例如

[帐户类型] [欧元] - [客户] - CH12 3456 7890 1234 5678 9

在Android上,这将呈现如下内容:

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

请你回答之前......

......考虑以下几点:

• 我可以缩写一些信息,但我仍然会在select中包含长选项标签.因此,无需告诉我IBAN可以缩写等.
• 我不能依赖<select>或<option>元素的CSS样式.
• 用户猎人已经在这里提出了<optgroup>标签.这是一个相当不错的想法,将是一个小的解决方法,但还不够,因为iPhone和Android浏览器仍然裁剪IBAN :-(
• 我已经知道了非常漂亮的jQuery UI Selectmenu原型.不幸的是,它还没有与jquery-ui 1.8.5兼容,并且无法保证它何时稳定.
• 我正在使用jquery和jquery-ui 1.8.5,因此对插件的任何想法/参考都非常受欢迎.
• 任何其他的想法,以规避这个问题GENERALLY欢迎.

Answer 1

您是否能够创建options 组来最小化冗余文本？

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

然后value="-1"使用jQuery 进行无法选择

或者您可以使用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>