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实现滑动图片自己测试的例子
Nov 05 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
详解Bootstrap按钮
Jan 04 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
Vue计算属性的使用
Aug 04 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
CocosCreator入门教程之网络通信
Apr 16 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
SONY ICF-F10中波修复记
2021/03/02 无线电
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python实现ipsec开权限实例
2014/11/11 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
详解Python如何生成词云的方法
2018/06/01 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
使用Tkinter制作信息提示框
2020/02/18 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
人力资源总监工作说明
2014/03/03 职场文书
中秋手机店促销方案
2014/06/16 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
运动会宣传语
2015/07/13 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
三下乡活动心得体会
2016/01/23 职场文书