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

Question

当我的 HTML 下拉菜单显示在 iPhone 或 Android 浏览器中时，我遇到了一些问题。我经常需要渲染很长的 标签，例如

[AccountType] [EUR] - [Customer] - CH12 3456 7890 1234 5678 9

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

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

请在回答之前...

...考虑以下几点:

• 我可以缩写一些信息，但我仍然会在选择中遇到带有长选项标签的情况。因此无需告诉我 IBAN 可以缩写等。
• 我不能依赖

或 元素的 CSS 样式。

用户猎人已经提出了 标签 here 。这是个不错的主意，也是一个小的解决方法，但这还不够，因为 IBAN 仍然会被 iPhone 和 Android 浏览器裁剪:-(

我已经认识非常漂亮的 jQuery UI Selectmenu prototype 了。不幸的是，它还不兼容 jquery-ui 1.8.5，并且无法保证它何时会稳定。

我正在使用 jquery 和 jquery-ui 1.8.5，因此非常欢迎任何关于插件的想法/引用。

欢迎提出一般来规避该问题的任何其他想法。

Answer 1

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

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