append option tag with value which are selected in different select tag

Question

I have Three Select Tags Two with player names

<select >
<option value="plarer1">plarer1</option>
<option value="plarer2">plarer2</option>
</select>
<select >
<option value="plarer3">plarer3</option>
<option value="plarer4">plarer4</option>
</select>

and the third one is empty and hidden when I will select the value from both select tags they may both appear with value and name in the third select tag

Answer 1

One way to do this is using javascript in the browser:

First make function to create a simple HTML select element that contains a number of options specified by their title. This is pretty straight forward:

function createDropdownWithTitles(...optionTitles) {
  const dropdown = document.createElement('select')
  const defaultOption = new Option('Choose', null, true, true)
  defaultOption.disabled = true
  dropdown.add(defaultOption)
  for (const title of optionTitles) {
    const option = new Option(title, title)
    dropdown.add(option)
  }
  return dropdown
}

Then make a function that creates a dynamic dropdown. This is an HTML select element that will dynamically retrieve its options from the selected options of other dropdown boxes.

This becomes a bit more complex. There are two things we need to do:

• Keep track of the dropdowns that are filled in already: we call this filledInDropdowns in our code. Once all these dropdowns are filled in we can make the dynamic dropdown visible.

• Keep track of the contents of newly filled in dropdowns. We should reflect these contents in our dynamic dropdown.

Here is it in code

function createDropdownBasedOn(...otherDropdowns) {
  const dropdown = document.createElement('select')
  dropdown.style.visibility = 'hidden'
  const filledInDropdowns = new Array(otherDropdowns.length)
  for (const [index, dropdown] of otherDropdowns.entries()) {
    dropdown.addEventListener('change', event => fillIn(event.currentTarget, index))
    filledInDropdowns[index] = false
  }
  function fillIn(dependency, index) {
    filledInDropdowns[index] = true
    dropdown[index] = new Option(dependency.value, dependency.value)
    for (const filledIn of filledInDropdowns) {
      if (filledIn === false) return
    }
    dropdown.style.visibility = 'visible'
  }
  return dropdown
}

And then to wrap up create some sample dropdowns:

const dropdownA = createDropdownWithTitles('Player 1', 'Player 2')
const dropdownB = createDropdownWithTitles('Player 3', 'Player 4')

document.body.appendChild(dropdownA)
document.body.appendChild(dropdownB)
document.body.appendChild(createDropdownBasedOn(dropdownA, dropdownB))

Check out a working example:

 function createDropdownWithTitles(...optionTitles) { const dropdown = document.createElement('select') const defaultOption = new Option('Choose', null, true, true) defaultOption.disabled = true dropdown.add(defaultOption) for (const title of optionTitles) { const option = new Option(title, title) dropdown.add(option) } return dropdown } function createDropdownBasedOn(...otherDropdowns) { const dropdown = document.createElement('select') dropdown.style.visibility = 'hidden' const filledInDropdowns = new Array(otherDropdowns.length) for (const [index, dropdown] of otherDropdowns.entries()) { dropdown.addEventListener('change', event => fillIn(event.currentTarget, index)) filledInDropdowns[index] = false } function fillIn(dependency, index) { filledInDropdowns[index] = true dropdown[index] = new Option(dependency.value, dependency.value) for (const filledIn of filledInDropdowns) { if (filledIn === false) return } dropdown.style.visibility = 'visible' } return dropdown } const dropdownA = createDropdownWithTitles('Player 1', 'Player 2') const dropdownB = createDropdownWithTitles('Player 3', 'Player 4') document.body.appendChild(dropdownA) document.body.appendChild(dropdownB) document.body.appendChild(createDropdownBasedOn(dropdownA, dropdownB))