README

$.fn.bsSelect

这个jQuery插件将简单的选择元素转换为Bootstrap下拉元素。它提供了众多选项、方法和事件，以便进一步处理。它基于jQuery 3.6、Bootstrap 5.3和Bootstrap图标开发。

目录

• 要求
• 安装
• 使用
• 选项
• 方法
• 事件

要求

• bootstrap >=5.3
• jQuery 3.6 // 仅测试了这个版本

安装

下载并在body标签的末尾包含脚本。

<script src="dist/jquery.bs-select.js" type="text/javascript">

或者使用 composer 安装，并在body标签的末尾包含脚本。

composer require webcito/bs-select:dev-main

<script src="/vendor/webcito/bs-select/dist/jquery.bs-select.min.js" type="text/javascript">

设置全局默认值

// multiple options
$.bsSelect.setDefaults(options);
// get default options
$.bsSelect.getDefaults();

使用

所有具有属性 [data-bs-toggle="select"] 的选择都会自动初始化。

<!-- Simple selection -->
<select name="countries">
    <option value="Germany">Deutschland</option>
    <option value="Poland">Polen</option>
    ...
</select>

<!-- Or multiSelection -->
<select name="cities" multiple>
    <option value="1">Berlin rocks</option>
    <option value="2">New York</option>
    ...
</select>

<!-- Or with option groups -->
<select name="cities2" multiple>
    <optgroup label="Germany">
        <option value="1">Berlin</option>
        <option value="2">Munich</option>
    </optgroup>
    <optgroup label="USA">
        <option value="3">New York</option>
        <option value="4">San Francisco</option>
    </optgroup>
    <optgroup label="Spain">
        <option value="5">Barcelona</option>
        <option value="6">Madrid</option>
    </optgroup>
    ...
</select>
<!-- load jQuery and Bootstrap before -->
<script src="dist/jquery.bs-select.js" type="text/javascript">
    <script>
        $('select').bsSelect();
</script>

选项[data-attributes]

选项

方法

方法调用方式如下

$('select').bsSelect('method', param);

事件