Select Unique

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.

Usage

Babel, webpack, etc...
Client-side

Babel, webpack, etc...

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}`);
});

Client-side

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>

Author

Skye Shaw (skye.shaw -AT- gmail)

License

Released under the MIT License: http://www.opensource.org/licenses/MIT