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

Posted 2020-07-28 山冈龙的中文化PHP和JavaScript之家

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

   });