1、.html中先引用

<link href="{{ url_for('static', filename='css/bootstrap-select.css') }}" rel="stylesheet">
<script src="{{ url_for('static',filename='js/bootstrap-select.js') }}"></script>
2、flask 模板中写法:
{{ form2.cron_name(class='form-control show-tick  selectpicker') }}

3、js代码:

$(".selectpicker").selectpicker({
liveSearch:true,
});

4、selectpicker其他属性

参数名 类型 默认值 描述
actionsBox bool false

当设置为true,增加了两个按钮,下拉菜单的顶部(全选和取消全选)。

container string| false false

当设置为一个字符string,追加选择一个特定的元素或选择器,例如 container: 'body' | '.main-body'

countSelectedText string| function function

设置当selectedTextFormat是显示文本的格式countcount > #。{0}是所选择的量。{1}是用于选择的总可用。

当设定为一个函数,第一个参数是所选择的选项的数目,并且第二个是选项的总数。该函数必须返回一个字符string。

deselectAllText string 'Deselect All'

当取消选择所有选项按钮上的文本actionsBox被启用。

dropdownAlignRight bool | 'auto' false

对齐菜单,而不是左右。如果设置为'auto',如果在左对齐没有余地菜单的全宽度的菜单会自动右对齐。

dropupAuto bool true

进行检查以查看其具有更多的空间,上方或下方。如果dropup有足够的空间完全打开正常,但上面有更大的空间,在dropup仍能正常打开。否则,就变成了dropup。如果dropupAuto设置为false,dropups必须手动调用。

header string false

增加了菜单的顶部的头部; 默认包含关闭按钮

hideDisabled bool false

从菜单中删除禁用的选项和optgroups data-hide-disabled: true

iconBase string 'glyphicon'

将基地使用不同的图标字体代替Glyphicons。如果改变iconBase,你也可能要更改tickIcon,以防新的图标字体使用了不同的命名方案。

liveSearch bool false

当设置为true,增加了一个搜索框的下拉selectpicker的顶部。

liveSearchNormalize bool false

设置liveSearchNormalize以true允许不区分重音的搜索。

liveSearchPlaceholder string null

当设置为一个字符string,一个占位符属性等于该字符string将被添加到实况搜索输入。

liveSearchStyle string 'contains'

当设置为'contains',搜索将显示包含搜索到的文本选项。例如,搜索,返回鸭都为PL PL E,PL嗯,和PL antain。当设置为'startsWith',寻找PL只会返回PL UM和PL antain。

maxOptions integer | false false

当设置为一个integer ,并在多选择,所选选项的数量不能超过给定值。

该选项还可以存在作为数据属性为<optgroup>,在这种情况下,它仅适用于<optgroup>

maxOptionsText string| array | function function

启用maxOptions时所显示的文本,并为给定的方案选项的最大数量已被选定。

如果使用的功能,它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string,相同的文字用于元素和OPTGROUP两者。

mobile bool false

当设置为true,使能选择菜单中的设备的本机菜单。

multipleSeparator string ', '

坐落在分隔所选选项的按钮显示的字符。

noneSelectedText string 'Nothing selected'

当多个选择时所显示的文本没有选择的选择。

selectAllText string 'Select All'

当选择了所有选项,按钮上的文本actionsBox被启用。

selectedTextFormat 'values''static''count''count > x'(其中,x是integer ) 'values'

指定选择如何显示有多个选择。

'values'显示所选择的选项(由分隔的列表multipleSeparator'static'简单地显示所述选择元件的标题。'count'显示所选选项的总数量。'count > x'行为类似于'values'直到所选选项的数目大于x;在此之后,它的行为象'count'

selectOnTab bool false

当设置为true,对待像selectpicker下拉列表中输入或空格字符制表符。

showContent bool true

当设置为true,显示与该按钮选择的选项(一个或多个)相关联的自定义的HTML。当设置为false,期权价值将被显示。

showIcon bool true

当设置为true,与在按钮选择的选项(一个或多个)相关联的显示的图标(一个或多个)。

showSubtext bool false

当设置为true与所述按钮选择的选项相关联,显示潜台词。

showTick bool false

show(没有的项目上选择的选项勾选multiple属性)。

size 'auto'| integer | false 'auto'

当设置为'auto',菜单始终打开,以显示尽可能多的项目窗口将允许在没有被切断。

当设置为integer 时,菜单将显示项目的给定数量,即使下拉被切断。

当设置为false,菜单会一直显示所有项目。

style string| null null

当设置为一个字符string,添加值到该按钮的风格。

tickIcon string 'glyphicon-ok'

设置要使用的图标旁边显示的“滴答”来选择的选项。

title string| null null

对于selectpicker的默认标题。

width 'auto''fit'| css-width| false(其中css-width是单位CSS的宽度,例如100px false

当设置为auto,所述selectpicker的宽度被自动调节,以适应最宽的选项。

当设置为一个css-宽度,所述selectpicker的宽度内联强制为给定值。

当设置为false,所有宽度信息被删除。

windowPadding integer | array 0

这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ,同样填充将被添加到四面八方。可替代地,一个integer 数组可以在格式来使用[top, right, bottom, left]

boostrap selectpicker 用法的更多相关文章

  1. bootstrap-select,selectpicker 用法详细:通过官方文档翻译

    用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来翻译一下: 选项可以通过数据属性或JavaScript传递.对于数据属性,附加选项名称dat ...

  2. BootStrap--selectpicker的使用

    bootstrap-select,selectpicker 用法详细:通过官方文档翻译   用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来 ...

  3. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  4. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

  5. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  6. bootstrap-select用法详解

    首先需要引入 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href=&quo ...

  7. Boostrap的自适应功能

    其实理解栅栏模式之后,自适应功能就简单很多了,根据浏览器的大小,Boostrap有四种栅栏类名提供使用,用法与Css样式表类名选择器样式调用是一样的: xs:col-xs-1 ~ col-xs-12, ...

  8. bootstrap-select and selectpicker 修改下拉框的宽度或者下方留白

    bootstrap-select and selectpicker 修改下拉框的宽度或者下方留白 $("#sel_userName").selectpicker({ "w ...

  9. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

随机推荐

  1. Chroma Oracle 安装宝典,吐血整理

    尼玛,太坑爹!安装: 1.Chroma Application Service 2. PL SQL 安装Oracle 11g 的步骤和过程: 第一步:只能安装 Oracle 11g 64 bit 数据 ...

  2. 最全 C 语言常用算法详解-排序-队列-堆栈-链表-递归-树 (面试有用)

    具体 源代码 案例查看github,持续更新中............ github地址:https://github.com/Master-fd/C-Algorithm 1. 二分法查找 2. 冒泡 ...

  3. Qt opencv开发环境

    在.pro文件中添加 INCLUDEPATH += C:\opencv\build\include\ #头文件路径 C:\opencv\build\include\opencv\ C:\opencv\ ...

  4. WPA密码攻击宝典

    原则:密码以8-10位为主.11位仅限于当地手机号.一般人的多年用数字做密码的习惯和心理,先数 字.再字母,或数字.字母重复几遍,字符几乎全用小写,所以淘汰大写及"~!@#$%^&* ...

  5. findall查找 ^$*+?{ }{m,n}[].[.] \w \s \d \b \D \W

    #!/usr/bin/env python import re r = "aasa da.5a5dfgfda ada" ret = re.findall('a',r) print( ...

  6. round四舍五入

    #!/usr/bin/env python r = round(3.6) #四舍五入 print(r) C:\Python35\python3.exe F:/Python/2day/c7.py 4 P ...

  7. Java构造函数中调用构造函数

    在Java中,当为一个类创建了多个构造函数时,有时想在一个构造函数中调用另一个构造函数以减少代码量.这时可以使用this关键字来实现. 通常,当使用this关键字时,它意味着"这个对象&qu ...

  8. 第5章 使用MUI与H5+构建移动端app

    H5+是JS封装的工具集合,通过H5+我们就可以使用JS的方式去调用到我们手机端上的一些原生的组件. http://dev.dcloud.net.cn/mui/ http://dev.dcloud.n ...

  9. 【总结整理】JS的继承

    参考阮一峰的文章:http://javascript.ruanyifeng.com/oop/inheritance.html#toc4 function Shape() { this.x = 0; t ...

  10. css 层叠式样式表(2)

    一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...