добавить опциональный тег со значением, выбранным в другом теге выбора

Question

У меня есть три выбранных тега Двое с именами игроков

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

а третий пустой и скрытый когда я выберу значение из обоих тегов выбора, они могут оба появиться со значением и именем в третьем теге выбора

Answer 1

Один из способов сделать это - использовать JavaScript в браузере:

Сначала создайте функцию make для создания простого элемента HTML select, который содержит ряд параметров, указанных в их заголовке. Это довольно просто:

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
}

Затем создайте функцию, которая создает динамический выпадающий список. Это элемент HTML select, который будет динамически извлекать свои параметры из выбранных параметров других раскрывающихся списков.

Это становится немного сложнее. Нам нужно сделать две вещи:

• Отслеживайте уже заполненные выпадающие списки: мы называем это filledInDropdowns в нашем коде. Как только все эти раскрывающиеся списки заполнены, мы можем сделать динамический раскрывающийся список видимым.

• Отслеживать содержимое вновь заполненных раскрывающихся списков. Мы должны отразить это содержимое в нашем динамическом раскрывающемся списке.

Вот это в коде

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))

Проверьте рабочий пример:

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))