How to select multi select box chzn-select-deselect automatically?

Question

I have a multiselect chzn-select-deselect box. I want to select multiple values at once when I select a particular value. I have the following HTML:

<select id="filter_list_dropdwn" class="inp direct_value_opp fl" multiple="multiple" name="data[value1][]">
       <option value="1" parent_id="0"> parent1</option>
       <option value="2" parent_id="1"> child1 of parent1</option>
       <option value="3" parent_id="1"> child2 of parent1</option>
       <option value="4" parent_id="3"> child of child3</option>
</select>

If I select parent1 then automatically it's child will be selected. The working script is this:

    $('#filter_list_dropdwn option:not(:selected)').live('click', function () {
        unselected = $(this);

        var parent_id = $(unselected).attr("value");
        $('#filter_list_dropdwn option[parent_id=' + parent_id + ']').each(function (i, selected) {
            $(this).prop('selected', false).click();
        });
    });

    $('#filter_list_dropdwn option:selected').live('click', function () {
        selected = $(this);
        var parent_id = $(selected).attr("value");
        $('#filter_list_dropdwn option[parent_id=' + parent_id + ']').each(function (i, selected) {
            $(this).prop('selected', true).click();
        });
    });

Here is the fiddle for the above functionality: http://jsfiddle.net/NEXv3/

Now, I wanted to apply the same in chzn-select-deselect option. So, I modified the script like this:

$('#filter_list_dropdwn option:not(:selected)').live('click', function () {
    unselected = $(this);

    var parent_id = $(unselected).attr("value");
    $('#filter_list_dropdwn option[parent_id=' + parent_id + ']').each(function (i, selected) {
        $(this).attr('selected', false).chosen();
    });
});

$('#filter_list_dropdwn option:selected').live('click', function () {
    selected = $(this);
    var parent_id = $(selected).attr("value");
    $('#filter_list_dropdwn option[parent_id=' + parent_id + ']').each(function (i, selected) {
        $(this).attr('selected', true).chosen();
    });
});

But it didn't work as expected. Can anyone suggest me what went wrong in applying the same automatic multi select option in chzn-select-deselect dropdown?

Answer 1

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

Demo jsFiddle

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

Demo jsFiddle

Edit #2 :

Recursive implementation :

Final demo jsFiddle