jQuery dropdown not displaying first option

Question

So, I have a dropdown filter on a client web page, the dropdown should work by matching up the class in the hidden div and displaying the relevant content. However, in IE9 (and on the linked fiddle) you can see this doesn't work.

The second option (iphone) doesn't appear to display any results. I think the issue is down to the numbering of the 'select.dropdown' function but I can't figure out what that is, exactly.

Snippet:

$("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);

Any ideas?

The filtering works on IE10+ and Chrome & Firefox..

Thanks in advance!

Fiddle here

Answer 1

In your html the filter value is not correct.

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

value should have a capital 'P'