README

重要

此软件包已重写，此处进行了修订 https://github.com/ThomasDev-de/bs-select

jquery-bsSelectDrop

将选择框转换为下拉菜单

需求

bootstrap >=5.0
jQuery 3.6

安装

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

<script src="jquery.bsSelectDrop.js" type="text/javascript">

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

composer require webcito/bs-select-drop:dev-main

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

设置全局默认值

// multiple options
$.bsSelectDrop.setDefaults(options);
// single option
$.bsSelectDrop.setDefault(prop, val);
// get default options
$.bsSelectDrop.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>

<script>
  $('select').bsSelectDrop();
</script>

option[data-attributes]

选项

方法

方法的调用方式如下

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

show

打开下拉菜单

$('select').bsSelectDrop('show');

hide

关闭下拉菜单

$('select').bsSelectDrop('hide');

val

更改选择框的值

$('select').bsSelectDrop('val', 1);

updateOptions

更改下拉菜单的选项。

$('select').bsSelectDrop('updateOptions', {
  buttonClass: 'btn btn-danger',
  ...
});

refresh

重建下拉菜单。如果选项通过JavaScript更改，这很有用。

$('select').bsSelectDrop('refresh');

destroy

删除下拉菜单并恢复原始选择框。

$('select').bsSelectDrop('destroy');

webcito / bs-select-drop

维护者

详细信息