526互联

Bootstrap-select

发布时间 2023-03-22 21:17:08作者: 末末随笔

基本的例子

标准选择框

Make this:

Become this:

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

 

 

选择带有optgroups的框

<select class="selectpicker">
  <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

多个选择框

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

 

实时搜索

实时搜索

您可以通过传递data-live-search =“true”属性来添加搜索输入：

关键词

在选项中添加关键字以提高其可搜索性data-tokens.

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

 

限制选择的数量

限制可通过data-max-options属性选择的选项数。 它也适用于选项组。 使用maxOptionsText自定义达到限制时显示的消息。

<select class="selectpicker" multiple data-max-options="2">
​
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
​
<select class="selectpicker" multiple>
  <optgroup label="Condiments" data-max-options="2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Breads" data-max-options="2">
    <option>Plain</option>
    <option>Steamed</option>
    <option>Toasted</option>
  </optgroup>
</select>

 

自定义按钮文字

占位符

 

 

使用

title

属性将在未选择任何内容时设置默认占位符文本。 这适用于多个和标准选择框：

 

Multiple

Standard

<select class="selectpicker" multiple title="Choose one of the following...">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

选定的文字

 

在选择选项时，在各个选项上设置title属性以显示替代文本：

<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>

选定的文字格式

 

指定在多重选择中使用data-selected-text-format属性显示选择的方式。

支持的值是：

  • values：所选值的逗号分隔列表（默认）

  • count：如果选择了一个项目，则显示选项值。 如果选择多于一个，则显示所选项目的数量，例如， 选择了6个中的2个

  • count> x：其中x是显示格式从值更改为count时所选项目的数量

  • static：无论选择如何，始终显示选择标题（占位符）

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<select class="selectpicker" multiple data-selected-text-format="count > 3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

 

造型

按钮类

您可以通过data-style属性设置按钮类：

 

<select class="selectpicker" data-style="btn-primary">
  ...
</select>
​
<select class="selectpicker" data-style="btn-info">
  ...
</select>
​
<select class="selectpicker" data-style="btn-success">
  ...
</select>
​
<select class="selectpicker" data-style="btn-warning">
  ...
</select>
​
<select class="selectpicker" data-style="btn-danger">
  ...
</select>

勾选所选选项

您还可以使用show-tick类在标准选择框上显示复选标记图标：

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

菜单箭头(已弃用)

可以使用show-menu-arrow类添加Bootstrap菜单箭头：

注意： 此功能已弃用，将在v2.0.0中删除。

<select class="selectpicker show-menu-arrow">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

风格个人选择

 

添加到选项的类和样式将传输到选择框：

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

宽度

 

Wrap选择网格列或任何自定义父元素，以轻松实现所需的宽度。

 

<div class="row">
  <div class="col-sm-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

 

或者，使用data-width属性设置select的宽度。 将数据宽度设置为“自动”以自动将选择的宽度调整为最宽的选项。 'fit'会自动将select的宽度调整为当前所选选项的宽度。 还可以指定精确值，例如300px或50％。

width: 'auto'
width: 'fit'
width: '150px'
width: '75%'
<select class="selectpicker" data-width="auto">
  ...
</select>
<select class="selectpicker" data-width="fit">
  ...
</select>
<select class="selectpicker" data-width="100px">
  ...
</select>
<select class="selectpicker" data-width="75%">
  ...
</select>

自定义选项

图标

使用data-icon属性向选项或optgroup添加图标：

注意 ：Glyphicons不包含在Bootstrap 4中。要使用Font Awesome或其他图标库，您需要将iconBase添加到“glyphicon”以外的其他内容中。.

<select class="selectpicker">
  <option data-icon="fa-heart">Ketchup</option>
</select>

自定义内容

使用data-content属性将自定义HTML插入到选项中：

注意：此功能将HTML插入DOM。 默认情况下，使用我们的内置消毒剂对其进行消毒。

<select class="selectpicker">
  <option data-content="<span class='badge badge-success'>Relish</span>">Relish</option>
</select>

子文本

使用data-subtext属性将子文本添加到选项或optgroup：

将showSubtext设置为true。

<select class="selectpicker" data-size="5">
  <option data-subtext="Heinz">Ketchup</option>
</select>

自定义菜单

菜单大小

默认情况下，size选项设置为“auto”。 当尺寸设置为“自动”时，菜单始终打开以显示窗口允许的多个项目而不会被切断。 将size设置为false以始终显示所有项目。 也可以使用data-size属性指定菜单的大小。

 

data-size 指定一个数字选择菜单中显示的最大项目数。

<select class="selectpicker" data-size="5">
  ...
</select>

选择/取消选择所有选项

在菜单顶部添加两个按钮 - 选择全部并取消全部使用data-actions-box =“true”。.

<select class="selectpicker" multiple data-actions-box="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

分配者

将data-divider =“true”添加到选项以将其转换为分隔符。

<select class="selectpicker" data-size="5">
  <option data-divider="true"></option>
</select>

菜单标题

在下拉菜单中添加标题，例如 header: 'Select a condiment' or data-header="Select a condiment"

<select class="selectpicker" data-header="Select a condiment">
  ...
</select>

容器

将选择菜单附加到特定元素，例如 container：'body'或data-container =“。main-content”。 如果select元素位于具有overflow：hidden的元素内，则此选项非常有用。

container: false
container: 'body'
<div style="overflow:hidden;">
  <select class="selectpicker">
    ...
  </select>
  <select class="selectpicker" data-container="body">
    ...
  </select>
</div>

下拉菜单

dropupAuto默认设置为true，自动确定菜单是否应显示在选择框的上方或下方。 如果dropupAuto设置为false，则通过将.dropup类添加到select来手动选择一个dropup菜单。

<select class="selectpicker dropup" data-dropup-auto="false">
  ...
</select>

Disabled

Disabled 选择框

<select class="selectpicker" disabled>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Disabled 选项

<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
  <option>Relish</option>
</select>

Disabled 选项组

<select class="selectpicker test">
  <optgroup label="Picnic" disabled>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>