jQuery 下拉菜单不显示第一个选项

Question

所以，我在客户端网页上有一个下拉过滤器，下拉菜单应该通过匹配隐藏的 div 中的 class 并显示相关内容来工作。但是，在 IE9（以及链接的 fiddle）中，您可以看到这不起作用。

第二个选项 (iphone) 似乎没有显示任何结果。我认为问题在于 'select.dropdown' 函数的编号，但我无法弄清楚那是什么。

片段：

$("select.dropdown").change(function(){
var filters = $.map($("select.dropdown").toArray(), function(e){
    return $(e).val();
});

var filter;
if(filters[0]=="all")
{
    if(filters[1]=="all")
       filter = "";
    else
       filter = "." + filters[1];
}
else{
    if(filters[1]=="all")
       filter = "." + filters[0];
    else
       filter = "." + filters.join(".");
}
$("div#FilterContainer > div").hide();
$("div#FilterContainer").find("div" + filter).show();
console.log(filters);

有什么想法吗？

过滤适用于 IE10+ 和 Chrome & Firefox..

提前致谢！

Fiddle here

Answer 1

凭直觉，但请尝试删除 console.log 条目。

IE9 对于 console.log 条目或您在 IE9 中传递到控制台对象的任何其他方法存在问题。

编辑

为了更好的解释 - 查看这个问题。 Console.log IE9 issue

Answer 2

您的 html 过滤器值不正确。

<option value="iphone">iPhone</option>

值应该有大写 'P'

Answer 3

您的第一个下拉值具有选项 "iphone"（小写）包含结果的 div 具有 class 名称 "iPhone"。案例不匹配，因此 .find 在以下行中不起作用：

$("div#FilterContainer").find("div" + filter).show();

在您的代码段中使用调试器，您搜索的值是 "div.iphone.Case"，您需要 "div.iPhone.Case"

jQuery 下拉菜单不显示第一个选项

jQuery dropdown not displaying first option

javascript

jquery

internet-explorer-9

drop-down-menu

编辑