Removed


Better-Nice-Select exposes a few events for hooking into select functionality. The removed.better-nice-select event listener fires immediately after an option will be removed from the <select> field.

Key Description
e.detail.key The Key or rather the setted value for the <option> element which will be removed.
e.detail.value The Value or rather the setted innerText for the <option> element which will be removed.

 

<div class="container">
    <select multiple="multiple" data-toggle="better-nice-select" id="my-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 elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));

document.querySelector("#my-select").addEventListener("removed.better-nice-select", function (e) {
    alert(`REMOVED = Key: '${e.detail.key}' | Text: '${e.detail.value}'`);
});