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

i using jquery chosen on 4 select boxes being populated via database.

the select box ids are: #year_395, #make_395, #model_395, #trim_395.

i using following script "cascade" them second select box's options depend on option has been selected in first, options third dependent on 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 cascading correctly. problem when implement jquery chosen, new select boxes update, 1 step behind native boxes. using below code update options jquery chosen's replacement select box display. should cause jquery chosen update #trim_395 option #model_395 has been selected.

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

here the link build site:

you see if select year, make, , model, no trim options available, if have yet select model. if select model, options first model selected displayed. selecting third model display trim options second, etc.

i figured out on own. jquery chosen updating before hidden select boxes had time update so:

 $("#model_395").change(function(){  wto = settimeout(function() {      $("#trim_395").trigger('chosen:updated'); }, 500);  }); 

solved problem. looked :)