我将jquery Chosen与malihu的插件mCustomScrollbar一起使用,但发现它不兼容。
我想将滚动条应用于选定的结果,并且不起作用。这是我的工作小提琴,以查看我的工作。
HTML:
$(function() {
$('select.select').chosen({
disable_search_threshold: 10,
width: "50%"
});
//$('.chosen-results').mouseenter(function() {
$('.chosen-results').mCustomScrollbar({
theme: "dark-3"
});
//});
});
.select {
max-height: 100px;
}
<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>
</select>
jsFiddle:https ://jsfiddle.net/bbwfvcj0/
当mCustomScrollbar可见时,您必须对其进行初始化。
$(function() {
$('select.select').chosen({
disable_search_threshold: 5,
width: '50%'
});
$('select.select').on('chosen:showing_dropdown', function() {
$('.chosen-results:visible').mCustomScrollbar({
theme: 'minimal-dark'
});
});
$('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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句