• bootstrap-select多选


    bootstrap-select
    <!DOCTYPE html>
    <html>
    <head>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    </head>
    <body>
    <select class="selectpicker" multiple>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>
      
      <fieldset>
        <legend>bootstrap</legend>
        <div class="form-controls" style=" 590px;">
            <select class="selectpicker show-tick form-control" multiple="multiple" title="请选择供应商名称" data-size="10"
                    data-selected-text-format="count > 21"
                    data-live-search="true" data-live-search-placeholder="搜索"
                    data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="重置"
                    id="xinghao_id" name="xinghao_id" value="{$info.xinghao_id}">
            </select>
        </div>
    </fieldset>
    <hr/>
    <button id="btn">获取</button>
    
      <script type="text/javascript"> 
      $(document).ready(function(){
      $('.selectpicker').selectpicker({
      });
    
      $('.selectpicker').val('Mustard');
      $('.selectpicker').selectpicker('render');
      
       // 获取
        $("#btn").click(function () {
            var _vals = $("#xinghao_id").val();
            console.log(_vals)
        });
    
        var _option = "";
        for (var i = 0; i < 100; i++) {
            _option += '<option value="' + i + '">' + '供应商' + i + '</option>';
        }
        $("#xinghao_id").append(_option);
    
        // 动态追加元素需要 重新刷新渲染
        $('.selectpicker').selectpicker('refresh');
    
    });
      </script>
    </body>
    </html>
  • 相关阅读:
    大数据用户画像方法与实践(干货 转帖)
    前端学习之路
    MySQL学习记录
    Linux 运维之路
    Python学习之路
    NgRx/Store 4 + Angular 5使用教程
    CSS实现各种形状
    CSS3实现背景透明,文字不透明
    CSS实现网页背景图片自适应全屏
    使用Restify+superagent做数据转发
  • 原文地址:https://www.cnblogs.com/panjinzhao/p/13840659.html
Copyright © 2020-2023  润新知