BSMultiSelect 通过 Javascript/Jquery 改变选择的项目

Question

我一直在使用这个自定义 Bootstrap select 插件 BSMultiselect。我需要在页面加载后 select 一些选项，使用 jQuery/Javascript.

API 文档不是很清楚如何做到这一点。我试过的是：

var bsMultiSelect = $('#facilityFilter').BsMultiSelect();
bsMultiSelect.updateOptionSelected(0);

这实际上什么也没做。

Answer 1

为了select您需要在更新 bsMultiSelect 之前首先设置 selected 属性的选项。

片段：

$(function () {

  var $multiSelects = $("select[multiple='multiple']");
  $multiSelects.bsMultiSelect();

  // set the selected attribute...
  $multiSelects.find('option').eq(0).prop('selected', 'selected');

  // ....so, update the bsMultiSelect
  $multiSelects.data('DashboardCode.BsMultiSelect').updateOptionSelected(0);

});

.row {
    background: #f8f9fa;
    margin-top: 20px;
}

.col {
    border: solid 1px #6c757d;
    padding: 10px;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@1.1.9/dist/js/BsMultiSelect.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous">

<form action="/" method="post">
    <div class="container">
        <div class="form-group row">
            <label class="col-form-label col-sm-2" for="edit-states1-id">BsMultiSelect</label>
            <div class="col-sm-10">
                <select name="States1" id="edit-states1-id" class="form-control test"  multiple="multiple" style="display: none;">
                    <option value="AL">Alabama</option>
                    <option value="AK" disabled>Alaska</option>
                    <option value="AZ" >Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">District Of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI" hidden >Hawaii Hidden</option>
                    <option value="ID" hidden>Idaho Hidden</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
            </div>
        </div>

    </div>
</form>

BSMultiSelect 通过 Javascript/Jquery 改变选择的项目

BSMultiSelect changing selected items through Javascript/Jquery

html

javascript

jquery

bsmultiselect