Select Unique

Given a group of select fields with the same options, Select Unique will remove an option from the other select fields when it's selected, and put it back when it's changed.

Demo

Answer three questions

View Code
<script src="https://cdn.jsdelivr.net/npm/select-unique@0.0.2/dist/select-unique.min.js"></script>
<script>
var questions = new SelectUnique('.questions select');

document.querySelector('.questions a.selected').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('.questions .demo textarea').textContent = JSON.stringify(questions.selected());
});

document.querySelector('.questions a.remaining').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('.questions .demo textarea').textContent = JSON.stringify(questions.remaining());
});
<script>
      

Pick your favorite countries

View Code
<script src="https://cdn.jsdelivr.net/npm/select-unique@0.0.2/dist/select-unique.min.js"></script>
<script>
var favorites = new SelectUnique('.favorites select', {ignoreOption: (opt) => opt.value.match(/^#/)});

document.querySelector('.favorites a.selected').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('.favorites .demo textarea').textContent = JSON.stringify(favorites.selected());
});

document.querySelector('.favorites a.remaining').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('.favorites .demo textarea').textContent = JSON.stringify(favorites.remaining());
});
<script>