javascript - 附加选项标签与在不同选择标签中选择的值

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。一旦填充了所有这些下拉列表，我们就可以使动态下拉列表可见。

• 跟踪新填充的下拉列表的内容。我们应该在动态下拉列表中反射(reflect)这些内容。

这是代码

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