Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值
1.页面代码:
页面引入:
bootstrap-select.min.css和
bootstrap-select.min.js、
defaults-zh_CN.min.js文件,并初始化下拉选项框。
带有下拉搜索样式的下拉框属性:data-live-search="true"
下拉选项框可多选属性:multiple

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 clearfix ">
<label class="col-xs-4 col-sm-4 control-label required">车班名称:</label>
<div class="col-xs-8 col-sm-8">
<div class="input-group">
<select name="shuttleBusId" class="form-control select-picker" data-live-search="true" multiple>
<option value="">-- 请选择 --</option>
<option th:each="iterator : ${vehicleShiftList}"
th:value="${iterator.idTrafficVehicleShift}"
th:text="${iterator.vehicleShiftName}">
</option>
</select>
</div>
</div>
</div>

2.js代码// select 多选可以设置做多选中项,使用maxlength

// js代码如下:
// 获取到下拉框说所有选中项
var checkParam = $('#type-select').find('option:selected');
// 选中的ID集合
var checkId = [];
// 选中的文本值集合
var checkText = [];
for (var i=0;i<checkParam.length;i++) {
checkId.push(checkParam[i].value);
}
for (var i=0;i<checkParam.length;i++) {
checkText.push(checkParam[i].textContent);
}
// 数组转字符串
var ids = checkId.join(',');
var text = checkText.join(',');
// 1.定义对象,并设置属性名和值---------------------------------------------
// 判断是否选中
if (checkParam.length > 0) {
var hilidayFlag = 1;
// 定义传入参数对象,并赋值
var params = {
holidayFlag: holidayFlag,
shuttleBusId: ids,
shuttleBusName: text
}
} // 2.定义对象,并设置属性名和值---------------------------------------------
// 获取表单值
var user= {};
// 获取到页面表单中所有值 name-value形式
var formData = $('#addForm').serializeArray();
formData.forEach(function (item) {
user[item.name] = item.value;
}) ps:将获取表单结果数组转成对象
Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值的更多相关文章
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- jquery操作select下拉框的多种方法(选中,取值,赋值等)
Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...
- jq select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性
select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...
- bootstrap中selectpicker下拉框使用方法实例
最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接, ...
- jquery 下拉框插件,实现智能补全,模糊搜索,多选
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...
- bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式 二.HTML代码 <select id="msgRoles" multiple=&q ...
- layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...
- 解决bootStrap selectpicker 下拉栏上方弹出
最近项目中遇到了一个使用bootStrap selectpicker 进行下拉栏展示的时候出现在元素上方弹出展示的问题,可把我难受坏了,和测试互怼最终以失败告终(人家还是一个娇滴滴的小姑娘),在查了a ...
- bootstrap的下拉框在firefox界面不友好的处理
http://output.jsbin.com/titaki 以上这个链接在firefix浏览器打开就会发现里面有个小容器,而且下拉按钮样式跟不友好 上谷歌查了一下 1.小容器可以利用select:p ...
随机推荐
- 分享-SpringCloud微服务架构图
1: 为大家分享一张SpringCloud微服务通用架构图 标题 此图仅供参考: 需要原图的同学请移步 >>>>>>>>> 这里 如有不合理的地 ...
- MySQL连接使用
在mysql查询中,我们会通过排序,分组等在一张表中读取数据,这是比较简单的,但是在真正的应用中经常需要从多个数据表中读取数据.下面就为大家介绍这种方式,链接查询join. INNER JOIN(内连 ...
- JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--实现
先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...
- 简单了解Django应用app及分布式路由
前言 应用在Django的项目中是一个独立的业务模块,可以包含自己的路由,视图,模板,模型. 一 创建应用程序 创建步骤 用manage.py中的子命令startapp创建应用文件夹 在setting ...
- python网络爬虫入门(二)
刚去看了一下,18年2月份写了第一篇关于爬虫的文章(仅仅介绍了使用requests库去获取HTML代码),一年多之后看来很稚嫩也没有多少参考的意义,但没想着要去修改它,留着也是一个回忆吧.至少证明着我 ...
- C#验证邮箱,电话,手机,数字,英文,日期,身份证,邮编,网址,IP类等常用函数封装
#region 验证邮箱验证邮箱 /**//// <summary> /// 验证邮箱 /// </summary> /// <param name="sour ...
- 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...
- p6.BTC-挖矿难度
挖矿就是不断调整nouce和header中其他可变字段,使得整个block header 的hash值小于等于target,target越小,挖矿难度越大. 出块时间设置为了10分钟,可以尽可能避免同 ...
- web安全及渗透
kali linux是最好的黑客linux渗透发行版,包含许多实用工具. 参考:用于黑客渗透测试的 21 个最佳 Kali Linux 工具 https://linux.cn/article-10 ...
- [daily][qemu][kvm] 使用qemu/kvm模拟numa节点
qemu的配置参数又复杂又难用,man手册写的也是非常对付,很多信息都没有. 而且,竟然遗弃掉旧的配置,换用新的配置.不过这也是好事,说明它在发展,我是欢迎的. 唯一的问题是,要经常跟着它一起更新配置 ...