1.页面代码:

页面引入:

  1. bootstrap-select.min.css
  1. bootstrap-select.min.js
  1. defaults-zh_CN.min.js文件,并初始化下拉选项框。
  1. 带有下拉搜索样式的下拉框属性:data-live-search="true"
  1. 下拉选项框可多选属性:multiple
  1. <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 clearfix ">
  2. <label class="col-xs-4 col-sm-4 control-label required">车班名称:</label>
  3. <div class="col-xs-8 col-sm-8">
  4. <div class="input-group">
  5. <select name="shuttleBusId" class="form-control select-picker" data-live-search="true" multiple>
  6. <option value="">-- 请选择 --</option>
  7. <option th:each="iterator : ${vehicleShiftList}"
  8. th:value="${iterator.idTrafficVehicleShift}"
  9. th:text="${iterator.vehicleShiftName}">
  10. </option>
  11. </select>
  12. </div>
  13. </div>
  14. </div>

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

  1. // js代码如下:
  2. // 获取到下拉框说所有选中项
  3. var checkParam = $('#type-select').find('option:selected');
  4. // 选中的ID集合
  5. var checkId = [];
  6. // 选中的文本值集合
  7. var checkText = [];
  8. for (var i=0;i<checkParam.length;i++) {
  9. checkId.push(checkParam[i].value);
  10. }
  11. for (var i=0;i<checkParam.length;i++) {
  12. checkText.push(checkParam[i].textContent);
  13. }
  14. // 数组转字符串
  15. var ids = checkId.join(',');
  16. var text = checkText.join(',');
    // 1.定义对象,并设置属性名和值---------------------------------------------
  17. // 判断是否选中
  18. if (checkParam.length > 0) {
       var hilidayFlag = 1;
  19. // 定义传入参数对象,并赋值
  20. var params = {
  21. holidayFlag: holidayFlag,
  22. shuttleBusId: ids,
         shuttleBusName: text
  23. }
  24. }
  25. // 2.定义对象,并设置属性名和值---------------------------------------------
  1. // 获取表单值
    var user= {};
    // 获取到页面表单中所有值 name-value形式
    var formData = $('#addForm').serializeArray();
    formData.forEach(function (item) {
    user[item.name] = item.value;
    })
  2.  
  3. 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#中string类使用Replace方法来替换字符串

    在C#的字符串操作过程中,有时候需要替换字符串中的某个子字符串,此时就可以使用到字符串类自带的Replace方法来实现,Replace方法将查找到所有符合被替换的子字符串,然后将之全部替换为目标字符串 ...

  2. CSS关于选择器和继承的一些小问题:

    选择器的分组 对选择器进行分组,这样在同一组的选择器就可以分享相同的声明.使用逗号将需要分组的选择器分开 h1,h2,h3,h4,h5{ color:green; font-family:" ...

  3. img中alt和title属性的区别

    在图像标签img中,除了常用的宽度width和高度height属性之外,还有两个比较重要并且也会用到的属性,就是alt和title,这都是用来显示图片内容的具体信息的,但是这两个属性也有不同的地方.a ...

  4. Fortify漏洞之Dynamic Code Evaluation: Code Injection(动态脚本注入)和 Password Management: Hardcoded Password(密码硬编码)

    继续对Fortify的漏洞进行总结,本篇主要针对  Dynamic Code Evaluation: Code Injection(动态脚本注入) 和 Password Management: Har ...

  5. 利用ABAP 740的新关键字REDUCE完成一个实际工作任务

    ABAP 740从2013年发布至今已经过去很长的时间了,下面这张图来自SAP社区博客: ABAP News for Release 7.40 – What is ABAP 7.40? 图中的ABAP ...

  6. Mysql 存储过程 + python调用存储过程 (内置函数讲解及定义摘抄)

    定义 存储过程:就是为以后的使用而保存的一条或多条 MySQL语句的集合.可将其视为批文件,虽然它们的作用不仅限于批处理. 个人使用存储过程的原因就是因为 存储过程比使用单独的SQL语句要快 有如下表 ...

  7. 尚硅谷韩顺平Linux教程学习笔记

    目录 尚硅谷韩顺平Linux教程学习笔记 写在前面 虚拟机 Linux目录结构 远程登录Linux系统 vi和vim编辑器 关机.重启和用户登录注销 用户管理 实用指令 组管理和权限管理 定时任务调度 ...

  8. 【转】DATA_SECTION 和CODE_SECTION 的区别

    请问#pragma DATA_ALIGN有什么作用? 下面是我在EDMA的一个例程中摘录的几句话:#pragma DATA_ALIGN(ping,128);#pragma DATA_ALIGN(pon ...

  9. SVN提交错误及使用技巧

    错误1: Some of selected resources were not added to version control. Some of selected resources were n ...

  10. 浅谈OpenStack与虚拟机的区别与联系

    很多不太明白OpenStack与虚拟机之间的区别,下面以KVM为例,给大家讲一下他们的区别和联系 OpenStack:开源管理项目OpenStack是一个旨在为公共及私有云的建设与管理提供软件的开源项 ...