[英]append option tag with value which are selected in different select tag
我有三个选择标签,两个带有球员姓名
<select >
<option value="plarer1">plarer1</option>
<option value="plarer2">plarer2</option>
</select>
<select >
<option value="plarer3">plarer3</option>
<option value="plarer4">plarer4</option>
</select>
当我将从两个选择标签中选择值时,第三个是空的且隐藏的,它们可能在第三个选择标签中都带有值和名称
一种方法是在浏览器中使用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
称为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))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.