Question

这是我使用的代码：

$(function() {
  $('select.select').chosen({
    disable_search_threshold: 5,
    width: '50%'
  });
  $('select.select').on('chosen:showing_dropdown', function() {
    $('.chosen-results:visible').mCustomScrollbar({
      theme: 'minimal-dark',
      autoHideScrollbar: false
    });
  });
  $('select.select').on('chosen:hiding_dropdown', function() {
   if($(".chosen-results").length) {
    $('.chosen-results').mCustomScrollbar('destroy');
    }
  });
});

.chosen-drop .chosen-results {
  max-height: 100px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet" />

<select id="name" class="select">
  <option value="">Select</option>
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
  <option value="ddd">ddd</option>
  <option value="eee">eee</option>
  <option value="fff">fff</option>
  <option value="ggg">ggg</option>
  <option value="hhh">hhh</option>
</select>

当我尝试使用搜索框时，它没有任何问题，但是当我清除搜索结果时，mCustomScrollbar要销毁和selected.js也会给我一个错误TypeError: f[0] is undefined。

Answer 1

请尝试以下示例

＆＃13;

$(function() {
  $('select.select').chosen({
    disable_search_threshold: 5,
    width: '50%'

  });


 $('.chosen-container').on('click', function() {
       
  $('.chosen-results li').wrapAll('<div class="chosen-dropdown"></div>') 
   $('.chosen-dropdown').mCustomScrollbar({
        theme: 'minimal-dark'
  })       			  		
        			   
  });

});

＆＃13;

 .chosen-dropdown{
 	height: 240px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet" />

<select id="name" class="select">
  <option value="">Select</option>
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
  <option value="ddd">ddd</option>
  <option value="eee">eee</option>
  <option value="fff">fff</option>
  <option value="ggg">ggg</option>
  <option value="hhh">hhh</option>
  <option value="ccc">ccc</option>
  <option value="ddd">ddd</option>
  <option value="eee">eee</option>
  <option value="fff">fff</option>
  <option value="ggg">ggg</option>
  <option value="hhh">hhh</option>
</select>

＆＃13;

selected.js在清除搜索结果时销毁mCustomScrollbar

1 个答案: