Bootstrap select 多选并获取选中的值
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
<title></title>
</head>
<body id="">
<div class="form-group">
<!-- <div class="title">
可选择多个指标
</div> -->
<div class="centent1Select">
<select id="usertype" title="可选择多个指标" onchange="centent1SelectOnchang(this)"
class="selectpicker show-tick form-control" multiple data-live-search="false">
<option value="1">累计访问人数</option>
<option value="2">打开次数</option>
<option value="3">访问次数</option>
<option value="4">访问人数</option>
<option value="5">新访问人数</option>
<option value="6">平均访问深度</option>
<option value="7">次均停留时长</option>
<option value="8">总添加人数</option>
<option value="9">新添加人数</option>
<option value="10">删除添加人数</option>
<option value="11">分享次数</option>
<option value="12">分享人数</option>
</select>
</div>
</div>
<script type="text/javascript">
$(window).on('load', function () {
$('#usertype').selectpicker({
'selectedText': 'cat'
});
});
//取出选择的任务执行人的方法
function centent1SelectOnchang() {
var val = "", staffs = [];
//循环的取出插件选择的元素(通过是否添加了selected类名判断)
for (var i = 0; i < $("li.selected").length; i++) {
val = $("li.selected").eq(i).find(".text").text();
if (val != '') {
staffs.push(val);
}
}
console.log(staffs)
}
</script>
</body>
</html>
Bootstrap select 多选并获取选中的值的更多相关文章
- bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)
h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 首先引入bootstrap和bootstrap-select的c ...
- 2. select下拉框获取选中的值
1.获取select选中的value值: $("#select1ID").find("option:selected").val(); --select1ID ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- 微信小程序获取复选框全选,反选选中的值
wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap=&quo ...
- jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
- Jquery判断单选框是否选中和获取选中的值
第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Bootstrap select多选下拉框实现代码
前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没 ...
- 使用layui框架的select获取选中的值
在使用时需要注意:select标签的外层需要加上类名".layui-form" 接下来就是根据需求来改变下拉框的内容了,直接给select的option重新赋一次值,记得加上对应的 ...
随机推荐
- 单例模式的双重锁为什么要加volatile(转)
单例模式如下: 需要volatile关键字的原因是,在并发情况下,如果没有volatile关键字,在第5行会出现问题. instance = new TestInstance();可以分解为3行伪代码 ...
- vue项目在ie中空白问题
vue项目在ie浏览器中出现空白,f12打开后发现在body下面就只有一个div盒子,因此我们可以猜测就是js没有引入导致的,所有网上看了一些相关的才知道,在ie中无法解析es6或者版本更高的语法,所 ...
- javascript 数组排序原理的简单理解
js内置的Array函数原型对象有个sort方法,这个方法能按照顺序排序数组. 例如: var arr1 = [6, 4, 2, 5, 2]; arr1.sort((x, y) => x - y ...
- 离线安装zabbix文档
为了离线安装需要离线安装包,可以通过这个方式获取. 用yum安装软件默认不保存软件包,要保存需修改配置文件 # vi /etc/yum.conf 将keepcache的值改为1 安装版本:rel ...
- 判断是否发生url跳转
url="https://www.baidu.com/" url='http://www.freebuf.com/fevents/133225.html' # 方法一:禁止跳转:a ...
- 七年开发浅谈Nginx负载均衡
一 特点 1.1 应用情况 Nginx做为一个强大的Web服务器软件,具有高性能.高并发性和低内存占用的特点.此外,其也能够提供强大的反向代理功能.俄罗斯大约有超过20%的虚拟主机采用Nginx作为反 ...
- Android笔记(六十六) android中的动画——XML文件定义属性动画
除了直接在java代码中定义动画之外,还可以使用xml文件定义动画,以便重用. 如果想要使用XML来编写动画,首先要在res目录下面新建一个animator文件夹,所有属性动画的XML文件都应该存放在 ...
- (Linux基础学习)第八章:命令行历史,history
第1节:命令行历史简介保存你输入的命令历史.可以用它来重复执行命令登录shell时,会读取命令历史文件中记录下的命令~/.bash_history登录进shell后新执行的命令只会记录在缓存中:这些命 ...
- GCC使用总结
概念 GCC一开始是linux系统集成的用来编译C程序的编译器(GNU C Compiler),目前GCC已经不仅仅支持C语言了,因而其缩写名单意义也变成(GNU Compiler Collectio ...
- LAMP环境源码编译安装过程
LAMP环境源码编译安装过程 一.Apache的安装 1.1.apache软件包及依赖包准备 httpd-2.4.29.tar.bz2 apr-1.6.3.tar.gz apr- ...