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

1、最终实现的效果：

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

});