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 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
angular2使用简单介绍
2016/03/01 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python实现Linux中的du命令
2017/06/12 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Django框架模板用法入门教程
2019/11/04 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
银行门卫岗位职责
2013/12/29 职场文书
社区志愿者心得体会
2014/01/03 职场文书
学生安全责任书范本
2014/07/24 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
python实现过滤敏感词
2021/05/08 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
MySQL 条件查询的常用操作
2022/04/28 MySQL