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 EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
Javascript中For In语句用法实例
May 14 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增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接收shell返回的结果中文乱码问题
2014/01/23 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
简单学习Python time模块
2016/04/29 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
使用python实现个性化词云的方法
2017/06/16 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python对List中的元素排序的方法
2018/04/01 Python
python和opencv实现抠图
2018/07/18 Python
python树莓派红外反射传感器
2019/01/21 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
python中for in的用法详解
2020/04/17 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
python Paramiko使用示例
2020/09/21 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
异步传递消息系统的作用
2016/05/01 面试题
办公室主任岗位承诺书
2014/05/29 职场文书
创先争优标语
2014/06/27 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
Redis 限流器
2022/05/15 Redis