Having a quick look at the author website, you will see that you have the following event when the selection changes :
$("#form_field").chosen().change( … );
And to update the select dropdown, you have to do :
$("#form_field").trigger("chosen:updated");
Now, your code have to be rewrited from the beginning :
$('#filter_list_dropdwn').chosen(); // to apply the plugin
$("#filter_list_dropdwn").chosen().change(function(e, option){
// when changing, option will contain {selected: "value"} or {deselected: "value"}
var selected = option.selected;
var deselected = option.deselected;
if (selected !== undefined) {
// if we have selected a new option
$('#filter_list_dropdwn option[data-parent_id=' + selected + ']').each(function () {
$(this).prop('selected', true);
});
} else if(deselected !== undefined) {
// if we have deselected an option
$('#filter_list_dropdwn option[data-parent_id=' + deselected + ']').each(function () {
$(this).prop('selected', false);
});
}
// redraw the "chosen select" when all changes have been made to the real one
$("#filter_list_dropdwn").trigger("chosen:updated");
});
Edit :
The code can be far shorter :
$("#filter_list_dropdwn").chosen().change(function(e, option){
var parent_id = option.selected !== undefined ? option.selected : option.deselected;
$('#filter_list_dropdwn option[data-parent_id=' + parent_id + ']').each(function () {
$(this).prop('selected', option.selected !== undefined ? true : false);
});
$("#filter_list_dropdwn").trigger("chosen:updated");
});
Edit #2 :
Recursive implementation :