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

      });

  • 相关阅读:
    java中传值与传引用
    microsofr visual studio编写c语言
    openfile学习笔记
    在 Windows 和 Linux(Gnome) 环境下 从命令界面打开网页的方式
    使用vsphere client 克隆虚拟机
    route命令
    linux rpm问题:怎样查看rpm安装包的安装路径
    【leetcode】415. 字符串相加
    【leetcode】面试题 17.01. 不用加号的加法
    【leetcode】989. 数组形式的整数加法
  • 原文地址:https://www.cnblogs.com/shsgl/p/5603550.html
Copyright © 2020-2023  润新知