选择下拉列表在Android浏览器上无效

时间:2012-01-27 04:01:51

标签: android html5

我遇到一个问题,当在Android移动设备上查看时,下拉选择框不会下拉(它基本上处于非活动状态)。它在桌面浏览器和ios浏览器上运行良好 - 在ios上显示一个选择器轮,从桌面上显示一个下拉选择列表。

示例代码是;

<select id = "log_or_norm" autofocus>
<option value="1">Lognormal</option>
<option value="2">Normal</option>
</select>

我试过了发现的建议; http://youngliferamblings.wordpress.com/2011/08/09/select-dropdown-in-android-webview/

  

有时在Android中,select标签不起作用,尤其是在使用webview的应用中。这让我疯了很长时间。我发现的主要修复,即使你的选择深埋​​在div和行中,也就是这个css:

     

选择{   能见度:可见;   -webkit-appearance:menulist-text;   }

     

-webkit-appearance可能是实际需要的唯一一个,并将其设置为'listbox'也适用。

     

这就是全部。这应该是自己的职位。

没有运气......

我希望这里的一位大师可以提供一个优雅的解决方案,避免我不得不为每个选项制作离散按钮。我并不担心Android体验是否会获得不错的选择轮,但需要能够让Android用户选择一个选项。

提前感谢你

3 个答案:

答案 0 :(得分:0)

尝试

getDriver().createElement(By.id("your locator"));
getDriver().createElement(By.id("your locator")).sendKeys("option Name you want to give");

答案 1 :(得分:0)

var divCreated = false;
$(document).ready(function () {
        var value = "";
        $("select").each(function (i) {
                $(this).click(function () {
                        //alert(($(this).is(":focus")));
                        if (!($(this).is(":focus"))) {
                            if (!divCreated) {
                                $("body").append('<div class="for_select"></div>');
                                divCreated = true;
                            }
                            $(this).clone().appendTo(".for_select");
                            open($(this));
                        }
                    });
            });

        function open(obj) {
            var pos = $(obj).offset();
            $(".for_select select").css("position", "absolute");
            $(".for_select select").css("zIndex", "9999999999999");
            var toAdd = $(obj).innerHeight();
            $(".for_select select").offset({
                    top: pos.top + toAdd,
                    left: pos.left
                });
            $(".for_select select").attr("size", ($(obj).children("option").length > 10 ? 10 : $(obj).children("option").length));
            $(".for_select select").change(function () {
                    value = $(".for_select select").val();
                    $(obj).val(value);

                    $(obj).children("option").each(function () {
                            if ($(this).text() == value)
                                $(this).attr("selected", "selected");
                            else if ($(this).attr("selected")) {
                                $(this).removeAttr("selected");
                            }
                        });
                    var parentHeight = $(obj).parent().innerHeight();
                    $(obj).parent().css("height", parentHeight + "px");
                    $(obj).parent().css("position", "relative");
                    $(obj).css("position", "absolute");
                    $(obj).css("left", "0px");
                    var prevElementsHeight = 0;
                    var isSelect = false;
                    $(obj).parent().children("*").each(function () {
                            if ($(this) == $(obj))
                                isSelect = true;
                            if (!isSelect)
                                prevElementsHeight += $(this).innerHeight();
                        });
                    $(obj).css("top", (prevElementsHeight / 2) + "px");
                    $(obj).css("zIndex", "9999");

                    close($(".for_select select"));
                });
        }

        function close(obj) {
            $(obj).css("position", "static");
            $(obj).attr("size", "1");
            $(".for_select").empty();
        }
    });

答案 2 :(得分:0)

在与我斗争了好几天后,解决方案变得相当简单。

通过从嵌套div中取出select来尝试调试,直到找到有问题的div。

就我而言,问题在于我将所有data-role =“page”div包装在父div中(为了在低端设备上加载)。出于某种原因,&lt; Android 2.3存在问题。