Given a group of HTML select elements with the same options, Select Unique will remove an option from the other select elements when it's selected, and put it back when it's changed.
Checkout the demo here.
npm install select-unique
Or:
yarn install select-unique
Then:
import SelectUnique from 'select-unique';
const selects = new SelectUnique('.some-group select');You can also give it some HTMLSelectElements:
const elements = [
document.querySelector('select:nth-of-type(2)'),
document.querySelector('select:nth-of-type(4)')
]
const selects = new SelectUnique(elements);Or even a NodeList:
const selects = new SelectUnique(document.querySelectorAll('select.question'));If you want to ignore certain options:
const selects new SelectUnique(selector, {
ignoreOption: option => option.value === 'ignore_me_buddy'
});You can also retrieve what's currently selected or remaining within the group:
selects.remaining().forEach(option => {
console.log(`text: ${option.text} value: ${option.value}`);
});
selects.selected().forEach(option => {
console.log(`text: ${option.text} value: ${option.value}`);
});Include it in your html page (or download it and include it):
<div id="my-select-group">
<!-- A bunch of selects -->
</div>
<script src="https://cdn.jsdelivr.net/npm/select-unique@latest/dist/select-unique.min.js"></script>
<script>
new SelectUnique('#my-select-group select');
</script>- jquery-selectunique from which this is based
Skye Shaw (skye.shaw -AT- gmail)
Released under the MIT License: http:https://www.opensource.org/licenses/MIT