Jquery Chosen is updating cascading selects on step behind native select boxes

Question

I am using jquery chosen on 4 select boxes that are being populated via database.

The select box ids are: #Year_395, #Make_395, #Model_395, #Trim_395.

I am using the following script to "cascade" them so that the second select box's options depend on what option has been selected in the first, the options for the third are dependent on the second selection etc.

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();
}

The native select boxes are cascading correctly. The problem is that when I implement jQuery Chosen, the new select boxes update, but do so one step behind the native boxes. For now I am using the below code to update the options for jQuery Chosen's replacement select box display. This should cause jQuery Chosen to update #Trim_395 as soon as an option for #Model_395 has been selected.

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

Here is the link to the build site:

You will see that if you select your year, make, and model, no trim options will be available, as if you have yet to select the model. If you then select another model, the options for the first model you selected will be displayed. Selecting a third model will display the trim options for the second, etc.

Answer 1

I figured it out on my own. jQuery Chosen was updating before the hidden select boxes had time to update so:

 $("#Model_395").change(function(){
 wto = setTimeout(function() {
     $("#Trim_395").trigger('chosen:updated');
}, 500);
 });

Solved the problem. Thanks to anyone who looked :)