首页 > 技术文章 > bootstrap-select多选

panjinzhao 2020-10-19 15:55 原文

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="width: 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>

 

推荐阅读