Bootstrap++:bootstrap-select 使用
效果图:
HTML:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>下拉框多选</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" > <script type='text/javascript' th:src='@{/ecej/core/jquery-3.2.0.min.js}'></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script> <link rel='stylesheet' type="text/css" th:href='@{/core/bootstrap-select-1.13.14/bootstrap-select.min.css}'/>
<script type='text/javascript' th:src='@{/core/bootstrap-select-1.13.14/bootstrap-select.js}'></script> <script type='text/javascript' th:src='@{/multipleSelect.js}'></script> </head>
<body> <fieldset>
<legend>bootstrap</legend>
<div class="form-controls" style="width: 300px;">
<select class="selectpicker show-tick form-control" multiple="multiple" title="请选择工厂" data-size="10"
data-selected-text-format="count > 15"
data-live-search="true" data-live-search-placeholder="搜索"
data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="重置"
id="xinghao_id" name="xinghao_id" value="{$info.xinghao_id}">
</select>
</div>
</fieldset>
<hr/>
<button id="btn">获取</button>
</body>
</html>
自定义 JS:
$(function () { // 获取
$("#btn").click(function () {
var _vals = $("#xinghao_id").val();
console.log(_vals)
}); var _option = "";
for (var i = 0; i < 100; i++) {
_option += '<option value="' + i + '">' + '测试' + i + '</option>';
}
$("#xinghao_id").append(_option); // 动态追加元素需要 重新刷新渲染
$('.selectpicker').selectpicker('refresh'); });
需把对应bootstrap-select 相关文件URL引入替换;可直接使用
常用属性介绍:
1、class="selectpicker" 普通的下拉框功能
2、title="请选择城市名称" title的作用与palcehoder一样。
3、select class="selectpicker" multiple selectpicker和multiple属性的搭配使用可实现多选
4、data-live-search="true" 这个属性的默认值是false,作用是打开模糊筛查搜索框。
5、data-max-options 这个属性表示最多可选几个,搭配multiple使用,用法:data-max-options=“2”,表示最多选两个。
6、data-selected-text-forma缩略模式, 用法:data-selected-text-format="count > 3",当选中值大于3个的时候只显示选中项的个数,注意只对多选生效。
7、data-style 表示默认选中样式,用法:data-style="btn-primary",属性值就是bootstrap的按钮样式。
8、data-size data-size="6",表示下拉框显示的下拉列表数量 超出条数后出现滚动条。
9、data-dropup-auto="false", 表示下拉框默认向下展开;"true",表示下拉框默认向下展开;"auto",(默认值)表示下拉框根据页面尺寸自动向下或向上展开。
10、$('.selectpicker').selectpicker('selectAll'); 全选
$('.selectpicker').selectpicker('deselectAll'); 反选:
$('.selectpicker').selectpicker('mobile'); 适应手机模式:
11、给下拉框赋初始值 .selectpicker:eq(0)表示该页面或者该表单的第几个使用了第几个selectpicker属性的input标签。
$('.selectpicker:eq(0)').selectpicker('val',valArea);
$('.selectpicker:eq(1)').selectpicker('val',valPost);
$('.selectpicker:eq(2)').selectpicker('val',valBank);
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('render');
12、与angular或者knockout合用问题:
即下拉框无法显示出选项,但实际上,按下F12去查看时,又明显的有这些选项值,只是页面无法展示。
a. 添加Js:(只有在编译之后第一次进入页面的时候生效,一旦刷新之后就失效(因为angular异步加载)
$(function () {
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('render');
})
更多资料:
1):核心选择:可以通过数据属性或JavaScript传递选项。对于数据属性,附加选项名称 data-
,如 data-style=""
或 data-selected-text-format="count"
。
2):大事记变迁:Bootstrap-select公开了一些事件以供选择功能使用。
hide.bs.select,hidden.bs.select,show.bs.select和showd.bs.select都具有一个 relatedTarget
属性,其值是切换锚元素。
$('#mySelect').on('hidden.bs.select', function (e) {
// do something...
});
传送门官网地址:https://developer.snapappointments.com/bootstrap-select/examples/
最新文章
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
- 移动站适配rel=alternate PC页和H5页适配标注
- session超时时间设置方法
- node服务器
- 一个python线程池的源码解析
- 从技术经理的角度算一算,如何可以多快好省的做个app
- mysql导出表数据
- js中的preventDefault与stopPropagation详解
- 昨天的这个先补上--这个是关于 JQ 的移动 和 渐变特效的点击事件
- Android学习笔记(十一)——ListView的使用(下)
- SDAutoLayout:比masonry更简单易用的自动布局库
- Python学习笔记——正则表达式入门
- hihocoder第42周 k*N骨牌覆盖(状态dp+矩阵快速幂)
- Struts2动态方法调用
- 常用base.css
- hadoop队列管理(指定queue跑程序)
- JAVA 第一周学习总结
- (转)广度优先搜索BFS和深度优先搜索DFS
- Python小白学习之路(二十一)—【迭代器】
- browser-sync 文件监听失败的解决方案