jquery Chosen 和 mCustomScrollbar 不能一起正常工作
Posted
技术标签:
【中文标题】jquery Chosen 和 mCustomScrollbar 不能一起正常工作【英文标题】:jquery Chosen and mCustomScrollbar not working properly together 【发布时间】:2017-05-08 17:50:17 【问题描述】:我使用 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/
【问题讨论】:
而且我不知道如何正确添加 JSFIDDLE 链接 XD 【参考方案1】:您必须在 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>
【讨论】:
虽然我已经完成了这个,+1 并标记为解决方案。如果其他人遇到同样的问题,希望对他们有所帮助 上述解决方案有效,但在关闭并再次打开下拉菜单时不显示所选值。有什么解决方法吗?以上是关于jquery Chosen 和 mCustomScrollbar 不能一起正常工作的主要内容,如果未能解决你的问题,请参考以下文章