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 日期对象Date扩展方法
May 30 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
PHP PDO操作总结
Nov 17 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
vue实现选中效果
Oct 07 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格式化电话号码的方法
2015/04/24 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python yield关键词案例测试
2019/10/15 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
爱心捐款倡议书范文
2014/05/12 职场文书
项目申请汇报材料
2014/08/16 职场文书
钳工实训报告总结
2014/11/04 职场文书
公司酒会致辞
2015/07/30 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android