Select

The methods

  • .select(item1, item2, item3, ...)
  • .selectAll()
  • .deselect(item1, item2, ...)
  • .deselectAll()

can be used to manually create or delete available <option> tags like the following example:

<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 = new betterNiceSelect.BetterNiceSelect("#select-select");

document.querySelector("#select-select-select").addEventListener("click", function () {
    select.select({id: "Apple", text:"Apple"},{id: "Lemon", text:"Lemon"},{id: "Garlic", text:"Garlic"});
});

document.querySelector("#select-select-select-all").addEventListener("click", function () {
    select.selectAll();
});

document.querySelector("#select-select-deselect").addEventListener("click", function () {
    select.deselect("Lemon", "Cabbages");
});

document.querySelector("#select-select-deselect-all").addEventListener("click", function () {
    select.deselectAll();
});