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 (from jsdelivr or cdnjs):

<div id="my-select-group">
  <!-- A bunch of selects -->
</div>

<script src="https://cdn.jsdelivr.net/npm/select-unique@VERSION/dist/select-unique.min.js"></script>
<script>
  new SelectUnique('#my-select-group select');
</script>

Replace VERSION in the src URL with the desired version.

See Also

• jquery-selectunique from which this is based

Author

Skye Shaw (skye.shaw -AT- gmail)

License

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