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');刷新。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM