如何自动选择多选框chzn-select-deselect？

Question

我有一个多选chzn-select-deselect框.我想在选择特定值时一次选择多个值.我有以下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

快速浏览一下作者网站，您会发现当选择更改时会发生以下事件：

\n\n

$("#form_field").chosen().change( \xe2\x80\xa6 );\n

\n\n

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

\n\n

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

\n\n

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

\n\n

$(\'#filter_list_dropdwn\').chosen(); // to apply the plugin\n\n$("#filter_list_dropdwn").chosen().change(function(e, option){\n    // when changing, option will contain {selected: "value"} or {deselected: "value"}\n    var selected = option.selected;\n    var deselected = option.deselected;\n\n    if (selected !== undefined) {\n        // if we have selected a new option\n        $(\'#filter_list_dropdwn option[data-parent_id=\' + selected + \']\').each(function () {\n            $(this).prop(\'selected\', true);\n        });\n    } else if(deselected !== undefined) {\n        // if we have deselected an option\n        $(\'#filter_list_dropdwn option[data-parent_id=\' + deselected + \']\').each(function () {\n            $(this).prop(\'selected\', false);\n        });\n    }\n    // redraw the "chosen select" when all changes have been made to the real one\n    $("#filter_list_dropdwn").trigger("chosen:updated");\n});\n

\n\n

演示 jsFiddle

\n\n

编辑 ：

\n\n

代码可以短得多：

\n\n

$("#filter_list_dropdwn").chosen().change(function(e, option){\n    var parent_id = option.selected !== undefined ? option.selected : option.deselected;\n\n    $(\'#filter_list_dropdwn option[data-parent_id=\' + parent_id + \']\').each(function () {\n        $(this).prop(\'selected\', option.selected !== undefined ? true : false);\n    });\n\n    $("#filter_list_dropdwn").trigger("chosen:updated");\n});\n

\n\n

演示 jsFiddle

\n\n

编辑#2：

\n\n

递归实现：

\n\n

最终演示 jsFiddle

\n