jquery chained selects with multiple parents - last select is always 'disabled'

Question

I am trying to implement a chained select dependent on 2 parent selects, but the child select always remains disabled, with no options loading. As far as I can tell, the first-parent\second-parent format is correct in my data, but yet the child select won't fire.

My setup is as follows:

• 1st parent select: years (year-2016, year-2015, year-2014...)
• 2nd parent select: media types (article, gallery, video)

If "year-2015" and "article" are selected, then the child select should display options with the class "year-2015\article".

Scripts:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.chained.js"></script>
<script>$("#item").chained("#year, #mediatypes");</script>

Here is a jsfiddle with the generated HTML

My code seems to be consistent with this example fiddle -- but I can't identify why my child select won't fire. What am I missing?

Answer 1

I found the problem shortly after taking the time to post this...

I had put the classes in the wrong order. My child select needed classes formatted as 'year-2015\article', not 'article\year-2015'. Simple error, but I'm "answering" my question in case someone else makes the same mistake.