jQuery Chosen with cascading selects not working

Question

I have 3 select boxes that are being populated from a database. I then use this javascript to make them cascade (dependent on selection in parent select box):

function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);

parent.change(function(){
    var parentValue = (this.value).replace(" ", "_");
    childOptions.remove();
    child
        .append(child.data('options').filter('.sub_' + parentValue))
        .change();
})

childOptions.not('.static, .sub_' + parent.val()).remove();
}

This works fine on native select boxes. The problem is that when I use jQuery Chosen, all of the options are returned in every select box regardless of what is selected in previous box (parent).

Link to build page here: http://site4.i-ocom.com/ Three select box ids are: #Make_395, #Model_395, #Trim_395 I have read the docs for chosen and have tried:

 $("#Make_395").chosen().change(function(){
 $("#Model_395").trigger('chosen:updated');
 });

 $("#Model_395").chosen().change(function(){
 $("#Trim_395").trigger('chosen:updated');
 });

as well as some other things that did not work. Any help is greatly appreciated as I am stumped.

Answer 1

Actually you have very old version of chosen plugin (0.14 while latest version on github is 1.1) so things from the manual may not work for you. Update your js and try again.