Bootstrap select实现下拉框多选效果

在学习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 = $;

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用Bootstrap typeahead插件实现搜索框自动补全的方法

    这就是贴代码的坏处之一:搜索框快被网友玩儿坏了!!!有故意输入空格的,有输入or 1=1的,有alert的,有html乱入的.......而且好像还在玩儿,随他们去吧,只要开心就好. 在项目中,经常会用到输入框的自动补全功能,就像百度.淘宝等搜索框一样:当用户输入首字母.关键词时,后台会迅速将与此相关的条目返回并显示到前台,以便用户选择,提升用户体验.当然本项目的补全功能和这些大厂的技术是没有可比性的,但用于站内搜索也是绰绰有余了. 接触到的自动补全插件主要有两个:autocomplete和ty

  • Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cl

  • Bootstrap实现弹性搜索框

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. 接下来通过本文给大家介绍Bootstrap实现弹性搜索框的代码,一起看下吧. <form action="" method="get" class="form-horizontal"> <div class="input-group se

  • Bootstrap框架下下拉框select搜索功能

    之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: <script type="text/javascript" src="<%=basePath%>/js/commons/jquery

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

  • bootstrap datetimepicker实现秒钟选择下拉框

    bootstrap datetimepicker插件没有秒钟选择器,如果要想选择的时间精确到秒没有办法控制,虽然可以配置format:'yyyy-mm-dd hh:ii:ss',会将秒钟添加到输入框中,但是无法控制秒钟数值,默认为当前客户端的时间的秒钟. 本示例修改bootstrap datetimepicker源代码,如果配置了显示秒钟format:'......ss',将会给分钟选择器层添加秒钟选择下拉框,可以自定义选择时间的秒钟部分,效果如下 bootstrap datetimepicke

  • 基于bootstrap实现多个下拉框同时搜索功能

    本文实例为大家分享了bootstrap实现下拉框搜索展示的具体代码,供大家参考,具体内容如下 1.第一个下拉框代码 <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> <!--快速查询--> <div class="input-group"> <span class="input-group-addon&qu

  • Bootstrap3制作搜索框样式的方法

    Bootstrap3中的很多样式,都是需要我们进行摸索着学习的,在制作类似百度的素搜索框时,一开始会不知道怎么做,其实很简单,利用内联图标方式就可以实现 <div class="input-group"> <input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary"&

  • Bootstrap模块dropdown实现下拉框响应

    本文介绍了Bootstrap下拉框模块dropdown的使用方法,供大家参考,具体内容如下 一.源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 二.功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原理: 1.利用dropdown类作为定位点,然后让子级的列表dropdown-menu绝对定位实现,还需要加一个单击点作为设置data-toggle="dropdown"才能做关联. 2. 需要

随机推荐