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 each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
Express的路由详解
Dec 10 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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
德劲1107的电路分析与打磨
2021/03/02 无线电
php实现邮件发送并带有附件
2014/01/24 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
python生成ppt的方法
2018/06/07 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
Python实现Restful API的例子
2019/08/31 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
餐厅总经理岗位职责
2013/12/31 职场文书
总经理检讨书
2014/09/15 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2015年销售助理工作总结
2015/05/11 职场文书