Chosen 的 optgroup 第一级单击的时候选择二级的全部

相关环境 及 版本

Chosen (v1.6.2) https://harvesthq.github.io/chosen/

jQuery (v1.8.3) 官网 http://jquery.com/

 

  前几天用到了二级的多选列表，选择使用Chosen。如下图一个美化控件。

 

  问题1来了：客户要求在第一级单击的时候，要选择二级的全部。

  初步预想：chosen是没有这个功能的，用js给这个元素 加入一个click事件，然后遍历一下它的子元素应该就可以搞定了。

    好了开始按着这个思路处理。但发现很多不是想预想的那样，添加上事件后没有任何反应。来看看这个控件的显示原理吧，一看才发现它把原生的select元素隐藏，然后在元素后面添加了div元素并结合一些css样式才显示成我们看到的样子。一头雾水，还是百度一下吧，其它人应该也会遇到这个问题。果不其然，被我找到了 http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests-chosen-jquery-plugin/ 不过是英文的，凑合着看吧。

// Add select/deselect all toggle to optgroups in chosen
$(document).on('click', '.group-result', function() {
    // Get unselected items in this group
    var unselected = $(this).nextUntil('.group-result').not('.result-selected');
    if(unselected.length) {
        // Select all items in this group
        unselected.trigger('mouseup');
    } else {
        $(this).nextUntil('.group-result').each(function() {
            // Deselect all items in this group
            $('a.search-choice-close[data-option-array-index="' + $(this).data('option-array-index') + '"]').trigger('click');
        });
    }
});

  测试了一下还不错，和客户的需求吻合。

  使用一段时间以后，由于业务扩展 需要在这个页面上面增加一个二级多选列表。那就再加一个select元素，还用chosen呗，结果发现了一个致命问题。

问题2来了：取消选择，也就是代码中deselect all 的时候，jquery的选择器选择的是整个document的。删除两个select元素中相同索引的子元素，造成数据丢失。

  经过一思索后，改进如下。

// Add select/deselect all toggle to optgroups in chosen
    $( document ).on( 'click', '.group-result', function () {
        // Get unselected items in this group
        var unselected = $( this ).nextUntil( '.group-result' ).not( '.result-selected' );
        if ( unselected.length ) {
            // Select all items in this group
            unselected.trigger( 'mouseup' );
        } else {
            var groups = new Array();
            $( this ).nextUntil( '.group-result' ).each( function () {
                // Deselect all items in this group
                // $( 'a.search-choice-close[data-option-array-index="' + $( this ).data( 'option-array-index' ) + '"]' ).trigger( 'click' );
                groups[groups.length] = $(this).parent().parent().prev().find('a.search-choice-close[data-option-array-index="' + $( this ).data( 'option-array-index' ) + '"]');
            } );

            for (var i = groups.length - 1; i >= 0; i--) {
                groups[i].trigger('click');
            }
        }
    } );

注意：trigger('click')后会删除本身，所以要先循环一遍 找到所有需要移除的元素，再全部触发删除。