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.
