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')后会删除本身，所以要先循环一遍找到所有需要移除的元素，再全部触发删除。

巴特西

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

最新文章

热门文章