zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    测试模式 windows2008 内部版本7601
    移动端UC /QQ 浏览器的部分私有Meta 属性
    正则表达式 正向预查 负向预查
    获取指定元素的某一个样式属性值
    把普通对象转换成json格式的对象
    求平均数-----类数组转换成数组
    轮播图
    倒计时
    JS 预解释相关理解
    ul ol di三者区别
  • 原文地址:https://www.cnblogs.com/panjinzhao/p/13840659.html
Copyright © 2011-2022 走看看