bootstrap-select学习基础示例

最新推荐文章于 2024-09-01 19:34:12 发布

立小言先森

最新推荐文章于 2024-09-01 19:34:12 发布

阅读量2.9k

点赞数

分类专栏：【前端】文章标签： bootstrap-select select

本文链接：https://blog.csdn.net/yaomingyang/article/details/79435924

版权

【前端】专栏收录该内容

28 篇文章

订阅专栏

翻译来自：http://silviomoreto.github.io/bootstrap-select/examples/

1.标准的下拉选择框

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

$('.selectpicker').selectpicker();

2.使用选项组来选择选项

<div class="container">
    <div class="row">
        <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>
    </div>
</div>

3.多选下拉框

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

4.下拉框搜索

你可以通过data-live-search=”true”属性新增一个搜索框。
在option选项中新增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>

5.限制选择的数量

使用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>

6.自定义按钮文本

占位符：
当使用title属性是可以设定在下拉框没有被选中时的默认占位符，这个属性对标准的下拉框和多选下拉框都起作用。
例如：

<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:如果有一个下拉选项被选中，然后这个选项值被展示，如果多于一个选项被选中，那么就展示选中的数量。
count > x:属性x值是指定多选框展示从values到count的临界点。
static:始终显示选择标题也就是title属性指定的占位符，无论如何选择。

例一：

<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>

7.样式

按钮类
你可以通过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菜单箭头：

<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;
}

宽度
包装选择在网格列或任何自定义父元素，以轻松执行所需的宽度：
例如：

<div class="row">
  <div class="col-xs-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属性设置下拉框的宽度，设置data-width为‘auto’自动适应选择的下拉选项的宽度。‘fit’自动调整选择宽度到当前选定的选项的宽度。也可以指定一个确切的值，300px或者50%。
例如：


width: 'auto'
width: 'fit'
width: '100px'
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>

8.自定义选项

图标
使用data-icon属性添加图标到选项或者选项组中：

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

使用data-content属性加入自定义的HTML到选项中

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

子内容
使用data-subtext属性添加子内容到选项或者选项组中：

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

9.自定义菜单

菜单大小
属性‘size’默认被设为‘auto’。当‘size’被设置为‘auto’,菜单将会展示系统允许展示的最大选项数量。设置size为false将会展示所有的列表，菜单列表选项也可以使用data-size属性指定。

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

选择和取消所有的选项
使用data-actions-box=”true”属性添加两个按钮到列表的最上方 Select All & Deselect All。

<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’ or data-container=”.main-content”

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

Dropup菜单
dropupAuto默认被设为true,它会自动决定菜单是否显示在选择框的上方或下方。如果dropupAuto被设为false,手动选择是否添加一个.dropup类到下拉选择框。

<select class="selectpicker dropup">
  ...
</select>

Disabled
禁用选择框
例如：

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

禁用选项

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

禁用选项组

<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>