如何限制jQuery Nice Select仅显示指定数量选项并添加滚动条

我用jQuery Nice Select插件实现了下拉选择器，当前组件包含9个选项，展开后部分选项超出屏幕范围，想设置最大显示选项数量，超出部分自动显示垂直滚动条，请问如何实现？

我的代码如下：

<select class="select-nice form-control" id="numTable" name="numTable"></select>
<script th:src="@{/js/jquery.nice-select.js}"></script>
<script>
$(document).ready(function () {
    $('.select-nice').niceSelect();
    // 其他业务代码...
});
</script>

解决方案 #

方法一：纯CSS实现（推荐） #

Nice Select生成的下拉列表对应DOM元素是.nice-select .list，直接通过CSS给这个UL元素设置最大高度和溢出属性即可。比如要限制最多显示5个选项，假设单个选项高度约30px，可设置：

.nice-select .list {
    max-height: 150px; /* 5*30px，可根据实际选项高度调整 */
    overflow-y: auto;
}

这种方法无需修改插件源码，后续升级插件也不会受影响，是最简便的实现方式。

方法二：修改插件源码动态控制（可选） #

如果需要根据选项数量动态调整最大显示数，或者严格限制固定数量的可见选项，可以修改插件的create_nice_select函数，在生成选项后添加高度控制逻辑：

找到插件源码中的create_nice_select函数，在$options.each(...)循环结束后，新增以下代码：

// 设置最多显示6个选项
var maxVisibleOptions = 6;
var optionHeight = $dropdown.find('.option').outerHeight();
// 只有当选项数超过限制时才启用滚动
if ($options.length > maxVisibleOptions) {
    $dropdown.find('.list').css({
        'max-height': optionHeight * maxVisibleOptions,
        'overflow-y': 'auto'
    });
}

修改后的完整create_nice_select函数片段：

function create_nice_select($select) {
    $select.after($('<div></div>')
        .addClass('nice-select')
        .addClass($select.attr('class') || '')
        .addClass($select.attr('disabled') ? 'disabled' : '')
        .attr('tabindex', $select.attr('disabled') ? null : '0')
        .html('<span class="current"></span><ul class="list"></ul>')
    );

    var $dropdown = $select.next();
    var $options = $select.find('option');
    var $selected = $select.find('option:selected');

    $dropdown.find('.current').html($selected.data('display') || $selected.text());

    $options.each(function (i) {
        var $option = $(this);
        var display = $option.data('display');
        $dropdown.find('ul').append($('<li></li>')
            .attr('data-value', $option.val())
            .attr('data-display', (display || null))
            .addClass('option' +
                ($option.is(':selected') ? ' selected' : '') +
                ($option.is(':disabled') ? ' disabled' : ''))
            .html($option.text())
        );
    });

    // 新增：限制最大可见选项数
    var maxVisibleOptions = 6;
    var optionHeight = $dropdown.find('.option').outerHeight();
    if ($options.length > maxVisibleOptions) {
        $dropdown.find('.list').css({
            'max-height': optionHeight * maxVisibleOptions,
            'overflow-y': 'auto'
        });
    }
}

注意事项 #

• 优先选择CSS方法，避免修改源码带来的维护成本。
• 若修改源码，记得备份原文件，防止插件更新时丢失自定义逻辑。
• 滚动条样式可通过CSS进一步自定义，适配项目整体风格。

内容的提问来源于stack exchange，提问作者pheromix