How to prevent Select elements from having duplicating options

Question

I am making a calendar page where users can select any day of the week but the options must not duplicate what is already selected in other ones.

Check below to see what I mean:

var elementOption = ["--", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"]

function update(element) {
  //do something, IDK
}

How can we prevent selected option in A from showing in options B and C, and vice versa?

 A 



 B 


 C

My question: How can we do it without using Jquery or many nested For loops (as performance is key here too). Thank you

Marco M · Accepted Answer

Here is a rough solution showing the dynamics in VanillaJS

https://jsfiddle.net/e5zhymwL/17/

const options = [
  "--",
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday",
  "saturday",
  "sunday",
]

const daysSelected = []

const selectedListBox = document.getElementById('selected')

function update(elem, targetId) {
  const selected = elem.value
  if (selected === '--') return
  daysSelected.push(selected)
  // print out already selected days
  const otherSelector = document.getElementById(targetId)
  // replace the targeted selector with available options
  otherSelector.innerHTML = ''
  otherSelector.insertAdjacentHTML(
    'beforeend',
    options
      .filter(option => daysSelected.indexOf(option) === -1)
      .map(option => ``)
  )
  selectedListBox.innerHTML = daysSelected
}

const reset = () => {
  daysSelected.length = 0;
  [document.getElementById('selector1'),
   document.getElementById('selector2')].forEach(elem => {
    elem.innerHTML = ''
    elem.insertAdjacentHTML(
      'beforeend',
      options
        .filter(option => daysSelected.indexOf(option) === -1)
        .map(option => ``)
    )
  })
  selectedListBox.innerHTML = ''
}

Non-duplicating for each of these




Selected days:

You will need to refactor and clean up a little the code (global scoping and duplications). However, following this you should be able to improve it a little and generate dynamically more days selectors. Hope it could help!

UPDATE

New jsfiddle => https://jsfiddle.net/knopfy/vqnrtzdf/33/

const options = [
    "--",
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday",
  "saturday",
  "sunday",
]

const selectors = {
    A: document.getElementById('A'),
    B: document.getElementById('B'),
    C: document.getElementById('C'),
}

const daysSelected = {}

function update(elem) {
    const selector = elem.id 
  const selected = elem.value
  if (selected === '--') {
      return
  }
    daysSelected[selector] = selected
  for (const key in selectors) {
    if (key !== selector) {
        for (const option of selectors[key].options) {
        option.disabled = daysSelected[key] !== option.value
            && Object.values(daysSelected).indexOf(option.value) !== -1
      }
    }
  }
}

How to prevent Select elements from having duplicating options

Answers (1)

Related Questions