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

in your `option` change `iphone` to `iPhone` ... [demo](http://jsfiddle.net/po3hrxpn/3/) — empiric, Apr 01 '15 at 14:45
Yeah, thanks for the demo too! Can't believe I missed this, back-end developer update the code and failed to mention this.. — Achello, Apr 01 '15 at 14:52

score 3 · Accepted Answer · answered Apr 01 '15 at 14:45

3

In your html the filter value is not correct.

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

value should have a capital 'P'

answered Apr 01 '15 at 14:45

Dhunt

1,584
9
22

Yep, that's fixed it - other developer updated the code without telling me, reverting it back to a lowercase 'p'. Thanks for your help and astute eyes! – Achello Apr 01 '15 at 14:51

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

On a hunch here, but try removing the console.log entry.

IE9 has issues with console.log entries or any other method you pass into the console object within IE9 for that matter.

Edit

For a better explanation - check out this question. Console.log IE9 issue

edited May 23 '17 at 11:52

Community

1
1

answered Apr 01 '15 at 14:43

James

442
2
13

Thanks for the info about the console.log issue, I wasn't aware of this before, I'll keep it it mind – Achello Apr 01 '15 at 15:00

score 0 · Answer 3 · answered Apr 01 '15 at 14:48

Your first dropdown value has the option "iphone" (lowercase) the divs containing the results have the class name "iPhone". The cases don't match so the .find doesn't work in the following line:

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

Using the debugger in your snippet the value you search for is "div.iphone.Case" where you need "div.iPhone.Case"

jQuery dropdown not displaying first option

3 Answers3

Edit