jquery - 仅在 Chrome 浏览器中出现 JQuery Listbox 奇怪错误

Question

我不知道这件事。

这应该是一件容易的事，但 Chrome 做得很糟糕。我有 2 个列表框区域和区域。这个想法是仅在选择区域时显示区域。它在 Firefox 中运行良好，但在 Chrome 中却不行。经过反复试验，我发现如果列表框选项减少它可以工作，但有很多选项它不能只在 Chrome 中工作，另一个浏览器很好。

请参阅粘贴箱中的脚本。有 2 个列表框版本。工作版本被评论。

http://pastebin.com/jt8JwFj4

谢谢

Answer 1

我对您的问题有另一种解决方案，请检查此问题

javascript

   $(document).ready(function(){                
            $("#fstarted-region").change(function() {
                var reg = $("#fstarted-region :selected").val();
                if(reg==''){
                    $("#fstarted-areas").hide();
                }else{
                    $("#fstarted-areas").show();
                    $("#fstarted-areas option").hide();
                    $("#fstarted-areas option."+reg).show();
                }

            });

        });

css

 #fstarted-areas option {
display: none;
}

#fstarted-areas{
display: none;
}
#fstarted-areas option.always {
display: none;
}

Answer 2

Webkit 浏览器的对象有点与 CSS 样式隔离。这意味着您无法执行 .show()、.hide() 等类似操作。

期待一些.detach()和.append()调用工作，或者只是开始使用模板引擎。

您调用.fadeIn()了 jsFiddle，假设您希望它首先隐藏。

HTML：

<select id="fstarted-areas" style="display: none">

Javascript：

$(document).ready(function() {
    // Get hold of all options
    var areaOptions = $("#fstarted-areas option");

    $("#fstarted-region").change(function() {
        // Also with a multiple selection I assume you need to get ALL 
        // selected instead of the first one.
        var regs = $("#fstarted-region :selected").map(function(i, el) {
            return '.' + $(el).val();
        });

        regs = $.makeArray(regs);

        // Detach all options, chain the search option.
        regs = areaOptions.detach().filter(regs.join(', '));

        // Add options into selection, then show it.
        $("#fstarted-areas").append(regs).fadeIn(500);
    });
});​