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 ...
随机推荐
- 【转载】C#中string类使用Replace方法来替换字符串
在C#的字符串操作过程中,有时候需要替换字符串中的某个子字符串,此时就可以使用到字符串类自带的Replace方法来实现,Replace方法将查找到所有符合被替换的子字符串,然后将之全部替换为目标字符串 ...
- CSS关于选择器和继承的一些小问题:
选择器的分组 对选择器进行分组,这样在同一组的选择器就可以分享相同的声明.使用逗号将需要分组的选择器分开 h1,h2,h3,h4,h5{ color:green; font-family:" ...
- img中alt和title属性的区别
在图像标签img中,除了常用的宽度width和高度height属性之外,还有两个比较重要并且也会用到的属性,就是alt和title,这都是用来显示图片内容的具体信息的,但是这两个属性也有不同的地方.a ...
- Fortify漏洞之Dynamic Code Evaluation: Code Injection(动态脚本注入)和 Password Management: Hardcoded Password(密码硬编码)
继续对Fortify的漏洞进行总结,本篇主要针对 Dynamic Code Evaluation: Code Injection(动态脚本注入) 和 Password Management: Har ...
- 利用ABAP 740的新关键字REDUCE完成一个实际工作任务
ABAP 740从2013年发布至今已经过去很长的时间了,下面这张图来自SAP社区博客: ABAP News for Release 7.40 – What is ABAP 7.40? 图中的ABAP ...
- Mysql 存储过程 + python调用存储过程 (内置函数讲解及定义摘抄)
定义 存储过程:就是为以后的使用而保存的一条或多条 MySQL语句的集合.可将其视为批文件,虽然它们的作用不仅限于批处理. 个人使用存储过程的原因就是因为 存储过程比使用单独的SQL语句要快 有如下表 ...
- 尚硅谷韩顺平Linux教程学习笔记
目录 尚硅谷韩顺平Linux教程学习笔记 写在前面 虚拟机 Linux目录结构 远程登录Linux系统 vi和vim编辑器 关机.重启和用户登录注销 用户管理 实用指令 组管理和权限管理 定时任务调度 ...
- 【转】DATA_SECTION 和CODE_SECTION 的区别
请问#pragma DATA_ALIGN有什么作用? 下面是我在EDMA的一个例程中摘录的几句话:#pragma DATA_ALIGN(ping,128);#pragma DATA_ALIGN(pon ...
- SVN提交错误及使用技巧
错误1: Some of selected resources were not added to version control. Some of selected resources were n ...
- 浅谈OpenStack与虚拟机的区别与联系
很多不太明白OpenStack与虚拟机之间的区别,下面以KVM为例,给大家讲一下他们的区别和联系 OpenStack:开源管理项目OpenStack是一个旨在为公共及私有云的建设与管理提供软件的开源项 ...