Chosen.js：使用幻灯片效果设置下拉菜单

Question

所以，chosen插件很棒。有没有人知道如何在下拉选择框中添加一点效果，使其在点击时使用slideDown / slideUp而不是没有动画的弹出？

Answer 1

您的问题有解决方案。

的CSS：

规则.chosen-container

添加

display: none;

并删除

left: -9999px;

现在我们必须绑定一些事件：

$('.chosen-select').on('chosen:showing_dropdown', function() {
    $(this).next('.chosen-container').children('.chosen-drop').slideDown(400);
}).on('chosen:hiding_dropdown', function () {
    $(this).next('.chosen-container').children('.chosen-drop').slideUp(400);
});

这就是全部！

Answer 2

Chosen没有太多的API，所以我正在与Select2合作，这是Chosen的更高级继任者。从Chosen到Select2的语法切换相当简单。

这会让你关闭，但Select2会在关闭时隐藏搜索结果。你必须处理这个问题。

http://jsfiddle.net/isherwood/9WgAB/

$("#mySelect").select2().on('open',function(){
    $('.select2-drop').hide().slideDown();
}).on('close',function(){
    $('.select2-drop').show().slideUp();
});