选择下拉菜单在 Android 浏览器上无效

Question

我遇到了一个问题，即在 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 中不起作用，尤其是在使用 webview 的应用中。这让我发疯了很长时间。我发现的主要修复，即使您的选择深埋​​在 div 和行中，无论怎样，这个 css 是：

选择{ 能见度：可见； -webkit-外观：菜单列表文本； }

-webkit-appearance 可能是唯一真正需要的，并且将其设置为“列表框”也可以。

就是这样。这值得单独发帖。

没有运气....

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

提前谢谢你

Answer 1

试试

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

Answer 2

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();
        }
    });

Answer 3

经过我几天的努力，解决方案变得相当简单。

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

就我而言，问题在于我将所有 data-role="page" div 包装在了父 div 中（为了在低端设备上加载缘故）。出于某种原因，