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


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

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

    方法/步骤

     
    1. 1

      最终实现的效果:

      bootstrap-select实现下拉框多选效果
    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 = $;

      });

  • 相关阅读:
    增强MyEclipse提示功能
    Mysql安装配置,修改初试密码。
    在我的电脑里面创建图标
    popup non topmost
    多线程下载或上传数据限速
    SynchronizationContext
    linux运维笔记——常用命令详解diff
    linux运维笔记——curl
    linux下mysql的源码安装
    shell编程——变量的数值计算
  • 原文地址:https://www.cnblogs.com/shsgl/p/5603550.html
Copyright © 2020-2023  润新知