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

【问题标题】：HTML <select> element is abbreviated in iPhone or Android browsersHTML <select> 元素在 iPhone 或 Android 浏览器中是缩写的
【发布时间】：2010-12-29 14:13:35
【问题描述】：

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

[AccountType] [EUR] - [客户] - 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，因此非常欢迎任何关于插件的想法/参考。
欢迎一般提出任何其他规避该问题的想法。

【问题讨论】：

标签： iphone jquery android html jquery-ui

【解决方案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>

然后使用 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>

【讨论】：

其实这是个好主意。我没有想到这一点。甚至可以使用标签...不过，对于 iPhone 而言，IBAN 仍然太大：-/
你试过调整选择框的font-size css吗？
很遗憾，无法更改字体大小。标签是一个小的改进。不过还不够。正如我所料，IBAN 对于 Android 和 iPhone 浏览器来说仍然太长
我会在 apple.com 上窥探一下，看看你有哪些选项来设置它们的选择元素的样式，但我猜你要么更改移动浏览器的字体大小，要么创建自己的选择方式，使用<ul> 带有一些自定义 js
我会接受你的解决方案。 <optgroup label="[Customer]"><option>[AccountType]</option></optgroup> 已经足够好了。我想不出别的了……

【解决方案2】：

我遇到了同样的问题。我想要一个类似于 jQuery UI 组合框的模拟下拉框，但我不想使用 jQuery UI，所以我使用了另一个 jQuery selectbox plugin。它有点错误，但对我来说比默认的 iPhone 选择元素更好。

【讨论】：

看起来不错。 iPhone 上的“溢出”滚动条是如何工作的？我发现这对于大多数移动设备来说都是一个问题。
它不起作用。如果选择太多，则无法滚动。我尝试使用 iScroll 使其可滚动，但没有成功。

【解决方案3】：

我尝试用不同的方法来解决这个问题，将“长数据”从选择块中移出到另一种更易于管理的形式中。
这是我的想法的草稿：

<!DOCTYPE html>
<html>
<head>
<style>
.clickme{
        text-decoration: underline;
        color: blue;
}
</style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">
        var iban=[
                [{"idx":"11","iban":"CH12 3456 7890 1234 5678 9"},{"idx":"12","iban":"CH12 3333 3333 3333 3333 9"}],
                [{"idx":"13","iban":"CH99 3333 3333 3333 3333 9"}],
                [{"idx":"14","iban":"CH88 3333 3333 3333 3333 9"},{"idx":"15","iban":"CH77 3333 3333 3333 3333 9"}]
                ];


$().ready(function(){

                $(".select_show").change(function(){
                        var testo="";
                        for( var t in iban[ $(this).val() ]){
                                if(testo==""){
                                        testo="Please select one following iban<br/>";
                                }
                                testo=testo + "<div class='clickme' value='"+ iban[ $(this).val() ][t].idx +"'>"+ iban[ $(this).val() ][t].iban +"</div><br/>";
                        }
                        $("#choices").html(testo);

                        $(".clickme").click(function(){
                                $("#hidden1").val($(this).attr('value'));
                                $("#choices").html("thanks");
                        });

                });

});
    </script>

</head>
<body >

<form>
<input type="text" id="hidden1" name="real_select_input" value=""> <br/>
<select class="select_show" id="select1">
        <option selected="selected" value="-1">please select</option>
        <option value="0">[AccountType] [EUR] - [Customer1]</option>
        <option value="1">[AccountType] [EUR] - [Customer2]</option>
        <option value="2">[AccountType] [EUR] - [Customer3]</option>
</select>
</form>
<div id="choices">
</div>

</body>
</html>

Iban 是一个数组数组：第一级包含您的不同帐户第二个是每个客户的不同个人资料。

“hidden1”应该是隐藏的 :)

PS 我错过了猎人关于“2010 年 12 月 29 日 14:42”的评论，指向这个方向

【讨论】：

感谢您的努力！这看起来很有希望。我会尽快试试这个
嗯，我现在明白了，你是在通过生成链接来模拟第二次选择......这在移动屏幕上有点过于冗长了。但是你的提示给了我一个新的想法。我可能只是尝试将 [AccountType] 放在 select 中（足够短），然后动态显示下面的所有附加信息，就像 info...
这是一个很好的建议，但它再次占用了太多空间......该死的移动设备上的空间不足:-)

【解决方案4】：

虽然 hunter 和 Ivan Buttinoni 提出的解决方法很有创意，而且想法很好，但我最终还是不得不找到不同的解决方案。它现在看起来类似于 jQuery UI 的组合框组件：

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

【讨论】：