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 相关文章推荐
javascript与CSS复习(三)
Jun 29 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
js实现进度条的方法
Feb 13 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 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常用函数的用法详解
2013/05/10 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
详解django自定义中间件处理
2018/11/21 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
保密工作实施方案
2014/02/24 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
中学教师师德承诺书
2014/05/23 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
党员个人年度总结
2015/02/14 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
理解python中装饰器的作用
2021/07/21 Python
python APScheduler执行定时任务介绍
2022/04/19 Python