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 = $;

});

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

# Bootstrap # select # 下拉框 # BootStrap中关于Select下拉框选择触发事件及扩展 # Bootstrap select多选下拉框实现代码 # Bootstrap模块dropdown实现下拉框响应 # Bootstrap框架下下拉框select搜索功能 # bootstrap datetimepicker实现秒钟选择下拉框 # bootstrap suggest下拉框使用详解 # 基于BootStrap multiselect.js实现的下拉框联动效果 # 基于bootstrap实现多个下拉框同时搜索功能 # Bootstrap组合上、下拉框简单实现代码 # 基于Bootstrap下拉框插件bootstrap-select使用方法详解 # 请选择 # 第一个 # 就不 # 东京 # 加拿大 # 日本 # 香港 # 大家多多 # 输入框 # 多选 # 效果很好 # 觉得该 # xs # label # col # gt # form # group # selectpicker

返回目录在线咨询

上一篇：老鹰主机建站教程：添加域名与绑定步骤详解
下一篇：线上网站制作流程,如何在线上筹办一场亚运会？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Bootstrap select实现下拉框多选效果

您的项目需求