如何自动选择多个选择框chzn-选择取消选择？

Question

我有一个多选择的chzn-选择取消选择框。当我选择一个特定的值时，我想同时选择多个值。我有以下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>

如果我选择parent1，那么将自动选择它的子级。工作脚本如下：

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

下面是上面功能的小提琴：http://jsfiddle.net/NEXv3/

现在，我想在chzn-select-deselect选项中应用同样的选项。所以，我对脚本做了如下修改：

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

但它并没有像预期的那样起作用。有人能建议我在chzn-select-deselect下拉列表中应用相同的自动多选择选项时出了什么问题吗？

Answer 1

如果快速查看作者网站，您将看到所选内容发生变化时发生了以下事件：

$("#form_field").chosen().change( … );

要更新select下拉列表，您必须执行以下操作：

$("#form_field").trigger("chosen:updated");

现在，您的代码必须从头开始重新编写：

$('#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");
});

演示jsFiddle

编辑:

代码可以更短：

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

演示jsFiddle

编辑#2 :

递归实现：

最终演示jsFiddle