2022-09-18 11:28:59

前言

bootstrap-select下拉框插件学习使用

下载与使用

bootstrap版本用的是v3.4.1
jquery版本3.2.1
bootstrap-select 版本用的是v1.12.4

bootstrap-select github开源地址：https://github.com/silviomoreto/bootstrap-select

通过CDN安装(cdnjs 或 jsDelivr):

    <!-- Latest compiled and minified CSS -->
    <link  href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>

也可以下载到本地引用，下载地址https://github.com/silviomoreto/bootstrap-select
注意顺序，先引用css.然后是jquery.js文件，再引用bootstrap.min.js,最后引用bootstrap-select.min.js

<head>
    <link href="/static/bootstarp/css/bootstrap.min.css" >
    <link  href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css">
    <script src="/static/bootstarp/jquery/jquery3.2.1.js"></script>
    <script src="/static/bootstarp/js/bootstrap.min.js"></script>
    <script src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script>
</head>

基础示例

select标签只需加class属性，设置class="selectpicker"

<div class="container">
    <h1>select下拉框示例</h1>
    <select class="selectpicker">
            <option value="1">python</option>
            <option value="2">selenium</option>
            <option value="3">pytest</option>
            <option value="4">appium</option>
            <option value="5">cypress</option>
    </select>
</div>

显示效果

多选框

多选框，在标签添加multiple

    <select class="selectpicker" multiple>
            <option value="1">python</option>
            <option value="2">selenium</option>
            <option value="3">pytest</option>
            <option value="4">appium</option>
            <option value="5">cypress</option>
    </select>

显示效果

可通过data-max-options属性选择的选项数

    <select class="selectpicker" multiple data-max-options="2">
            <option value="1">python</option>
            <option value="2">selenium</option>
            <option value="3">pytest</option>
            <option value="4">appium</option>
            <option value="5">cypress</option>
    </select>

显示效果

选项分组

    <select class="selectpicker" multiple data-max-options="2">
        <optgroup label="python" data-max-options="1">
            <option value="1">python</option>
            <option value="3">pytest</option>
            <option value="4">appium</option>
        </optgroup>
        <optgroup label="web" data-max-options="1">
            <option value="2">selenium</option>
            <option value="5">cypress</option>
        </optgroup>
    </select>

实时搜索

data-live-search ="true"属性来添加搜索输入

    <select class="selectpicker" data-live-search ="true">
            <option value="1">python</option>
            <option value="2">selenium</option>
            <option value="3">pytest</option>
            <option value="4">appium</option>
            <option value="5">cypress</option>
    </select>

显示效果

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

    <select class="selectpicker" data-live-search ="true">
            <option data-tokens="python" value="1">python</option>
            <option data-tokens="web" value="2">selenium</option>
            <option data-tokens="python" value="3">pytest</option>
            <option data-tokens="app" value="4">appium</option>
            <option data-tokens="web" value="5">cypress</option>
    </select>

title设置输入框默认文字

select标签添加title属性，给输入框加一个默认文字

   <select class="selectpicker" title="请选择">
            <option value="1">python</option>
            <option value="2">selenium</option>
            <option value="3">pytest</option>
            <option value="4">appium</option>
            <option value="5">cypress</option>
    </select>

显示效果

按钮颜色

通过data-style属性设置按钮类，颜色可以选以下几种

data-style=“btn-primary”
data-style=“btn-info”
data-style=“btn-success”
data-style=“btn-warning”
data-style=“btn-danger”

    <select class="selectpicker" title="请选择" data-style="btn-primary">
        ......
    </select>

勾选选择的选项

使用show-tick类在选项中加一个勾选标识

    <select class="selectpicker show-tick" title="请选择">
    ......
    </select>

宽度设置

select下拉框的宽度可以根据bootstrap网格父元素的宽度来定义
添加form-group和form-control属性定义form表单控件宽度

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <select class="selectpicker form-control" title="请选择">
                        <option value="1" title="python自动化">python</option>
                        <option value="2" title="web自动化">selenium</option>
                        <option value="3" title="pytest自动化">pytest</option>
                        <option value="4" title="app自动化">appium</option>
                        <option value="5" title="UI自动化">cypress</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <div class="form-group">
                <select class="selectpicker form-control" title="请选择">
                        <option value="1" title="python自动化">python</option>
                        <option value="2" title="web自动化">selenium</option>
                        <option value="3" title="pytest自动化">pytest</option>
                        <option value="4" title="app自动化">appium</option>
                        <option value="5" title="UI自动化">cypress</option>
                </select>
            </div>
        </div>
    </div>

实现效果

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

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