bootstrap-select实现下拉框多选效果

听语音

• 在学习bootstrap实现下拉多选效果的时候，觉得该效果很好，所以拿来分享下，这里就不详细的描述了，直接附上代码给各位看看

方法/步骤

1. 1

   最终实现的效果：

   

2. 2

   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>

3. 3

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

   });