bootstrap-select插件 没有效果

Posted 2023-04-15

<div class="form-group"> <label class="col-sm-2 control-label">产品标签</label> <div class="col-sm-10" style="float: left;" > <select class="selectpicker" multiple data-max-options="2"> <optgroup label="广东省"> <option value="1">广州市</option> <option value="2">深圳市</option> <option value="3">珠海市</option> </optgroup> <optgroup label="广西"> <option value="1">南宁市</option> <option value="2">柳州</option> <option value="3">桂林市</option> </optgroup> <optgroup label="山东"> <option value="1">烟台</option> <option value="2">青岛</option> <option value="3">济南</option> </optgroup> </select> </div> </div> 下图是效果图 请问怎么解决

参考技术A 代码执行加载顺序不对
并且是需要js 触发的追问

还需要什么文件 我给你粘出来

追答

$('.selectpicker').selectpicker(size: 3);
能看懂不？

追问

好了 但是为什么我在标签里面加size就好使那 什么原理？

追答

两种初始化方式 一种是script 一种是标签内控制

本回答被提问者采纳

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

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

   });