This package has been deprecated in favor of better-nice-select. Please consider migrating to better-nice-select for continued support and updates: https://www.npmjs.com/package/better-nice-select
Select
The methods
.bootstrapNiceSelect('select', item1, item2, item3, ...).bootstrapNiceSelect('selectAll').bootstrapNiceSelect('deselect', item1, item2, ...).bootstrapNiceSelect('deselectAll')
can be used to manually create or delete available <option> tags like the following example:
Possible options to search for are: Banana, Apple, Orange, Lemon, Pepper, Mushrooms, Cabbages, Celery, Brocoli, Garlic
<div class="container">
<div class="d-flex justify-content-start align-items-center m-4">
<button type="button" class="btn btn-outline-primary me-2" id="select-select-select">select Apple, Lemon, Garlic</button>
<button type="button" class="btn btn-outline-primary mx-2" id="select-select-select-all">select all</button>
<button type="button" class="btn btn-outline-primary mx-2" id="select-select-deselect">deselect Lemon, Cabbages</button>
<button type="button" class="btn btn-outline-primary ms-2" id="select-select-deselect-all">deselect all</button>
</div>
<select multiple="multiple" id="select-select">
<option value="Banana">Banana</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Lemon" selected="selected">Lemon</option>
<option value="Pepper">Pepper</option>
<option value="Mushrooms">Mushrooms</option>
<option value="Cabbages">Cabbages</option>
<option value="Celery">Celery</option>
<option value="Garlic">Garlic</option>
<option value="Brocoli">Brocoli</option>
</select>
</div>let select = bootstrapNiceSelect.BootstrapNiceSelect("#select-select");
document.querySelector("#select-select-select").addEventListener("click", function () {
select.bootstrapNiceSelect("select", {id: "Apple", text:"Apple"},{id: "Lemon", text:"Lemon"},{id: "Garlic", text:"Garlic"});
});
document.querySelector("#select-select-select-all").addEventListener("click", function () {
select.bootstrapNiceSelect("selectAll");
});
document.querySelector("#select-select-deselect").addEventListener("click", function () {
select.bootstrapNiceSelect("deselect", "Lemon", "Cabbages");
});
document.querySelector("#select-select-deselect-all").addEventListener("click", function () {
select.bootstrapNiceSelect("deselectAll");
});