fastadmin组件之selectpicker使用方法

傷城~ 2023-01-23 02:55 63阅读 0赞

是否启动动态搜索

<select name="data[location]" class="form-control width-auto selectpicker" data-live-search="true" style="width:150px" title='请选择教室号'>
       <option value="1">教室1</option>  
       <option value="2">教室2</option>  
       ...
    </select>

多选操作

<select name="data[location]" class="form-control width-auto selectpicker multiple" data-live-search="true" style="width:150px" title='请选择教室号'>
       <option value="1">教室1</option>  
       <option value="2">教室2</option>  
       ...
    </select>

设置最多选中项为2个

<select name="data[location]" class="form-control width-auto selectpicker multiple" data-max-options="2" data-live-search="true" style="width:150px" title='请选择教室号'>
       <option value="1">教室1</option>  
       <option value="2">教室2</option>  
       ...
    </select>

###  ###

select设置icon图标

<div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">分类类型:</label>
                <div class="col-xs-12 col-sm-8">
                    <select class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" title="请选择相应的分类类型" data-max-options="2" multiple>
                        <option value="0">请选择</option>
                        <option value="1" data-icon="fa fa-train">火车</option>
                        <option value="2" data-icon="fa fa-plane">飞机</option>
                        <option value="3" data-icon="fa fa fa-cab">自驾</option>
                        <option value="4" data-icon="fa fa-bicycle">自行车</option>
                    </select>
                </div>
    </div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70][]

选项分组

<div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">选项组：</label>
                <div class="col-xs-12 col-sm-8">
                    <select class="selectpicker" data-live-search="true" data-dropup-auto="false" title="请选择相应的分类类型" data-max-options="2" multiple>
                        <optgroup label="软件研发部">
                          <option>Mustard</option>
                          <option>Ketchup</option>
                          <option>Relish</option>
                        </optgroup>
                        <optgroup label="财务部">
                          <option>Tent</option>
                          <option>Flashlight</option>
                          <option>Toilet Paper</option>
                        </optgroup>
                  </select>
                </div>
        </div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70]: /images/20221004/6caae440953d4912b7e05181dafd87fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70 1]: /images/20221004/2b9e3aad3b0847b08e84a5757e050409.png

发表评论取消回复

表情：

评论列表（有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件使用方法

Vue 组件是 Vue.js 应用中可复用的代码块，通过组件可以将一个页面拆分为多个独立的部分，使代码更加清晰，结构更加简洁。以下是使用 Vue 组件的步骤： -------

亦凉/ 2024年03月26日 18:37/ 0 赞/ 118 阅读

相关 fastadmin组件之selectpicker使用方法

是否启动动态搜索 <select name="data[location]" class="form-control width-auto selectpicker"

傷城~/ 2023年01月23日 02:55/ 0 赞/ 64 阅读

相关 iCheck组件使用方法总结

iCheck组件使用方法总结常用方法实例代码常用方法 $(".i-checks").iCheck({

Myth丶恋晨/ 2022年12月04日 09:12/ 0 赞/ 219 阅读

相关 fastadmin组件之selectpage使用方法

常规用法下面介绍一个最基础的动态下拉列表示例，如下 <input id="c-name" data-rule="required" data-source=

以你之姓@/ 2022年10月20日 01:30/ 0 赞/ 1479 阅读

相关 laravel之rabbitmq组件使用

介绍 laravel入门及技术指南，参见相关文章。laravel集成使用消息中间件rabbitmq，提供服务器异步消息处理，提升服务器性能。下面谈谈如何

以你之姓@/ 2022年10月06日 15:57/ 0 赞/ 256 阅读

相关 fastadmin之editable组件_表格行内编辑事件

1.简介 x-editable组件是一个适用于bootstrap（目前只更新到bootstrap3）,jquery，jquery UI三种风格样式的弹出框编辑插件。本文根据

男娘i/ 2022年08月30日 11:37/ 0 赞/ 869 阅读

相关 Ionic 组件使用方法

Ionic 组件 1. 布局 > 12 栅格 <ion-grid> <ion-row> <ion-col col-6>苏州</

灰太狼/ 2022年06月07日 10:38/ 0 赞/ 472 阅读

相关 1.fastadmin之Log日志使用

要开始用fastadmin做小程序的后台。怎么说，这个框架封装的很好，对于我这种新手渣渣不太友好，惆怅~ 首先来谈谈日志的使用吧，如何打个log。一.概念 1

忘是亡心i/ 2022年05月13日 15:20/ 0 赞/ 2485 阅读

相关 Bootstrap-selectpicker使用小结

1.首先，Github链接在这里：[官网api][api] 2.关于多选的简单测试：[demo源码][demo]，如图： ![watermark_type_ZmFuZ3po

梦里梦外;/ 2022年04月21日 15:40/ 0 赞/ 189 阅读

相关 bootstrap-selectpicker插件的运用

1.页面中嵌入selectpicker,需要将class属性设为“selectpicker” <select id="bankname" class="selectp

小咪咪/ 2021年11月17日 18:26/ 0 赞/ 513 阅读