bootstrap-select.js 下拉框多选后动态赋值 - hehedada

bootstrap-select.js 下拉框多选后动态赋值

话不多说先上demo 其实demo是从官网下载的 只稍作改动 由于没有搞清楚怎么上传源代码 就把官网的链接贴出来吧 https://github.com/silviomoreto/bootstrap-select/archive/master.zip

其中改动的部分

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="maxOption2" class="col-lg-2 control-label">multiple, show-menu-arrow, maxOptions=2</label>

      <div class="col-lg-10">
        <select id="maxOption2" class="selectpicker show-menu-arrow form-control" multiple >
          <option value="chicken">chicken</option>
          <option value="turkey">turkey</option>
          <option value="duck">duck</option>
          <option value="goose">goose</option>
        </select>
      </div>
    </div>
  </form>

<script>
  document.addEventListener(\'DOMContentLoaded\', function () {
    var mySelect = $(\'#first-disabled2\');

    $(\'#special\').on(\'click\', function () {
      mySelect.find(\'option:selected\').prop(\'disabled\', true);
      mySelect.selectpicker(\'refresh\');
    });

    $(\'#special2\').on(\'click\', function () {
      mySelect.find(\'option:disabled\').prop(\'disabled\', false);
      mySelect.selectpicker(\'refresh\');
    });

    $(\'#basic2\').selectpicker({
      liveSearch: true,
      maxOptions: 1
    });
    $("#maxOption2").selectpicker(\'val\',[\'chicken\',\'turkey\',\'duck\']);
  });

</script>

其中，$("#maxOption2").selectpicker(\'val\',[\'chicken\',\'turkey\',\'duck\']);为设置多选值！

注意事项:1.此代码需写在页面的加载完成之后触发。

               2.在实际用的时候jquery版本用最新的就可以了。我用的3.0

               3.实际用的时候如果是动态赋值需要 $("#maxOption2").selectpicker(\'refresh\');刷新。