Bootstrap select实现下拉框多选效果


Posted in Javascript onDecember 23, 2016

在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看

HTML代码:

<div class= "row" style ="margin-top :10px;">
  <div class= "form-group col-xs-12">
   <label for= "sceneModel_title" class="col-sm-1 col-sm-offset-1 control-label" >分类: </label>
    <div class= "col-sm-4">
      <select class= "form-control selectpicker" multiple>
         <option> 请选择</option >
         <option> 游记</option >
         <option> 景点</option >
         <option> 东京</option >
         <option> 日本</option >
         <option> 香港</option >
         <option> 加拿大</option >
      </select>

 </div>
 <label for= "scene_title" class="col-sm-1 control-label" >主题游: </label>
 <div class= "col-sm-4">
   <select class= "form-control selectpicker" multiple>
   <option> 请选择</option >
   <option> 游船</option >
   <option> 漂流避暑</option >
   <option> 博物馆</option >
   <option> 影视基地</option >
   <option> 名胜古迹</option >
   <option> 海岛度假</option >

    </select>

  </div>

<!-- <div class="col-sm-10"> -->

<%-- <form:checkboxes path="sceneTypeRelations" items="${sceneTypeMap}" /> --%>

<!--  </div> -->

    </div>

</div>

js代码:

define(function(require, exports, module) {


   var $ = require( "jquery");
   require( "jquery-validation/1.11.1/jquery.validate.min.js" );
   require( "jquery-validation/1.11.1/messages_bs_zh.js" );
   require( "bootstrap/select/bootstrap-select.min.css" )
   require( "bootstrap/select/bootstrap-select.min.js" )
   $(document).ready( function() {

     // 聚焦第一个输入框
     $( "input[name=name]").focus();
     // 为inputForm注册validate函数
     $( "#sceneModel").validate();

      var lon = $("input[name=longitude]" ).val();
      if (lon == "," ) {
       $( "input[name=longitude]").val("" );

     }

     jQuery( '.selectpicker').selectpicker({

       liveSearch: true,

       size:8

     });

   });
   module.exports = $;

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 #Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 #Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 #Javascript
Bootstrap源码解读排版(1)
Dec 23 #Javascript
简单实现JS倒计时效果
Dec 23 #Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 #Javascript
jquery dataview数据视图插件使用方法
Dec 23 #Javascript
You might like
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python远程连接MySQL数据库
2019/04/19 Python
python队列Queue的详解
2019/05/10 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python中count函数知识点浅析
2020/12/17 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
小学生自我评价范文
2014/01/25 职场文书
实习生求职自荐信
2014/02/07 职场文书
校庆标语集锦
2014/06/25 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
mysql如何配置白名单访问
2021/06/30 MySQL