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和多选获取文本值的更多相关文章

  1. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  2. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  3. jq select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

  4. bootstrap中selectpicker下拉框使用方法实例

    最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接, ...

  5. jquery 下拉框插件,实现智能补全,模糊搜索,多选

    近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...

  6. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  7. layui 根据根据后台数据动态创建下拉框并同时默认选中

        第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...

  8. 解决bootStrap selectpicker 下拉栏上方弹出

    最近项目中遇到了一个使用bootStrap selectpicker 进行下拉栏展示的时候出现在元素上方弹出展示的问题,可把我难受坏了,和测试互怼最终以失败告终(人家还是一个娇滴滴的小姑娘),在查了a ...

  9. bootstrap的下拉框在firefox界面不友好的处理

    http://output.jsbin.com/titaki 以上这个链接在firefix浏览器打开就会发现里面有个小容器,而且下拉按钮样式跟不友好 上谷歌查了一下 1.小容器可以利用select:p ...

随机推荐

  1. C++项目链接出错, error LNK2019: 无法解析的外部符号 __imp_xxxx_Allocate,该符号在函数 "xxxx" (xxxx) 中被引用

    1 错误提示 error LNK2019: 无法解析的外部符号 __imp_FreeImage_Allocate,该符号在函数 "public: bool __cdecl colmap::B ...

  2. MySql 严格模式相关配置

    目录 MySql 严格模式 MySQL的sql_mode合理设置 sql model 常用来解决下面几类问题 sql_mode常用值 注意 改为严格模式后可能会存在的问题 模式设置和修改(以解决上述问 ...

  3. Spring事务传播机制与隔离机制

    详情查看 https://www.jianshu.com/p/249f2cd42692

  4. 《Clean Code》读书笔记——第二周

    本周我阅读了<Clean Code>. “神在细节中!”,建筑家范德罗如是说.他当然专注于基于宏伟构架之上的永恒建筑形式,他也同样为自己设计的建筑挑选门把手.同样软件开发也是这样,小处见大 ...

  5. 聊Java中的任务调度的实现方法及比较

    前言 任务调度是指基于给定时间点,给定时间间隔或者给定执行次数自动执行任务.本文由浅入深介绍四种任务调度的 Java 实现: Timer ScheduledExecutor 开源工具包 Quartz ...

  6. 【MySQL】你以为设置了并行复制就降低延迟了?这个你绝对想不到!

    在MySQL官方版本中,为了保证其的高可用性,一般情况我们会采用主从复制的方式来解决.当然,方法很多.而我们今天所要处理的是采用GTID方式并且开了多线程复制后,仍然延迟的情况,糟糕的是,延迟还在不断 ...

  7. MySQL Network--域名与VIP

    VIP与域名1.域名能在多个IDC切换,而VIP通常在特定网段内切换.2.VIP切换可以立即生效,而域名切换存在一定时间延迟. DNS解析顺序:1.查询本地域名映射配置(/etc/hosts)2.查查 ...

  8. 使用fail2ban预防被挖洞的笔记

    参考:https://blog.csdn.net/dorisnzy/article/details/82926067 1.安装fail2ban: yum -y install epel-release ...

  9. 使用Kerberos进行Hadoop认证

    使用Kerberos进行Hadoop认证 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Kerberos是一种网络身份验证协议.它旨在通过使用秘密密钥加密为客户端/服务器应用程序提 ...

  10. tomcat 使用quercus-4.0.39 支持PHP

    tomcat  使用quercus-4.0.39  支持PHP   Quercus是Caucho公司采用纯Java开发的一个PHP5引擎.基于开源授权协议GPL发布.Quercus自带很多个PHP模块 ...