首页>>表单>>Bootstrap4下拉框功能强化插件 支持单选多选分组(2021-12-18)

Bootstrap4下拉框功能强化插件 支持单选多选分组

Bootstrap4下拉框功能强化插件 支持单选多选分组
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="col-xs-12 col-md-4 mb-5">  
  2.                       <label>分组:</label>  
  3.                       <select id="optgroup" class="form-control form-control-chosen" data-placeholder="Please select..." multiple>  
  4.                         <optgroup label="华东">  
  5.                           <option>上海</option>  
  6.                           <option>浙江</option>  
  7.                           <option>江苏</option>  
  8.                         </optgroup>  
  9.                         <optgroup label="华北">  
  10.                           <option>北京</option>  
  11.                           <option>天津</option>  
  12.                           <option>河北</option>  
  13.                         </optgroup>  
  14.                       </select>  
  15.                     </div>  
  16.                     <div class="col-xs-12 col-md-4 mb-5">  
  17.                       <label>可选分组:</label>  
  18.                       <select id="optgroup_clickable" class="form-control form-control-chosen-optgroup" title="clickable_optgroup" data-placeholder="Please select..." multiple>  
  19.                         <optgroup label="华东">  
  20.                           <option>上海</option>  
  21.                           <option>浙江</option>  
  22.                           <option>江苏</option>  
  23.                         </optgroup>  
  24.                         <optgroup label="华北">  
  25.                           <option>北京</option>  
  26.                           <option>天津</option>  
  27.                           <option>河北</option>  
  28.                         </optgroup>  
  29.                       </select>  
  30.                     </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         $('.form-control-chosen').chosen({  
  3.           allow_single_deselect: true,  
  4.           width: '100%'  
  5.         });  
  6.         $('.form-control-chosen-required').chosen({  
  7.           allow_single_deselect: false,  
  8.           width: '100%'  
  9.         });  
  10.         $('.form-control-chosen-search-threshold-100').chosen({  
  11.           allow_single_deselect: true,  
  12.           disable_search_threshold: 100,  
  13.           width: '100%'  
  14.         });  
  15.         $('.form-control-chosen-optgroup').chosen({  
  16.           width: '100%'  
  17.         });  
  18.   
  19.         $(function() {  
  20.           $('[title="clickable_optgroup"]').addClass('chosen-container-optgroup-clickable');  
  21.         });  
  22.         $(document).on('click', '[title="clickable_optgroup"] .group-result', function() {  
  23.           var unselected = $(this).nextUntil('.group-result').not('.result-selected');  
  24.           if(unselected.length) {  
  25.             unselected.trigger('mouseup');  
  26.           } else {  
  27.             $(this).nextUntil('.group-result').each(function() {  
  28.               $('a.search-choice-close[data-option-array-index="' + $(this).data('option-array-index') + '"]').trigger('click');  
  29.             });  
  30.           }  
  31.         });  
  32.     </script>  

 


原文地址:http://www.freejs.net/article_biaodan_927.html