Bootstrap 4 select下拉框功能扩展和美化jquery插件

这是一款Bootstrap 4 select下拉框功能扩展和美化jquery插件。该插件扩展了Bootstrap 4原生select下拉框的功能，可以进行多选，带搜索框等，并且对Bootstrap 4原生select下拉框进行了样式美化。

安装

可以通过npm来安装该jquery插件。

npm i --save bootstrap-hardskilled-extend-select                  
                

使用方法

在页面中引入jquery，bootstrap4相关文件，以及select.min.css和select.min.js文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/select.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/select.min.js"></script>    
                

HTML结构

一个最基本的bootstrap select下拉框的HTML结构如下：

<select id="basic" class="form-control">
    <option>Rabbit</option>
    <option>Cat</option>
    <option class="get-class" disabled>Owl</option>
    <optgroup label="Insects">
        <option>Spider</option>
        <option>Worm</option>
        <option>Fly</option>
    </optgroup>
</select>
                

初始化插件

在页面DOM原生加载完毕之后，通过下面的方法来初始化该bootstrap4 select下拉框插件

$('select').extendSelect({
    // Search input placeholder:
    search: 'Find',
    // Title if option not selected:
    notSelectedTitle: 'Pls select',
    // Message if select list empty:
    empty: 'Empty',
    // Class to active element
    activeClass: 'active',
    // Class to disabled element
    disabledClass: 'disabled',
    // Custom error message for all selects (use placeholder %items)
    maxOptionMessage: 'Max %items elements',
    // Delay to hide message
    maxOptionMessageDelay: 2000,
    // Popover logic (resize or save height)
    popoverResize: true,
    // Auto resize dropdown by button width
    dropdownResize: true
});               
                

该Bootstrap 4 select下拉框功能扩展和美化jquery插件的github地址为：https://github.com/hardskilled/bootstrap-hardskilled-extend-select