具有以下html结构
<div id="container">
<div>
<button>Add item</button>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one" selected="">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two" selected="">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three" selected="">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
我想在名为skill []的选择标签中获得所有选定选项的值的列表。
我期望结果
['one', 'two', 'three']为了做到这一点，我首先尝试：
document.querySelector('#container').querySelectorAll('select[name=skills[]]')
我收到以下错误消息
SyntaxError: 'select[name=components[]]' is not a valid selector我也认为我可以尝试在每个
select标签中获取所有第一个div.well标签document.querySelector('#container').querySelectorAll('.well > select:first-child')
但是我得到一个空的NodeList
感谢您提出解决此问题的建议
感谢您的任何建议
谢谢大家，我感谢您的评论和答复。
这为我提供了名为skill []的选择标签中所有选择的选项的值。
Array.from(document.querySelectorAll('[name="skills[]"] option:checked')).map(option => option.value)
打印
['one', 'two', 'three'] 最佳答案
这应该做您想要的。我包含了一个片段，只要更改skills[]选择框，该片段就可以控制台记录变量。document.querySelectorAll('[name="skills[]"] option:checked')
let selectionArray = []
document.querySelectorAll('[name="skills[]"]').forEach(menu => {
menu.addEventListener('change', e => {
e.preventDefault()
const selection = document.querySelectorAll('[name="skills[]"] option:checked')
selection.forEach((selected, i) => {
selectionArray[i] = selected.value
})
console.log(selectionArray)
})
})<div id="container">
<div>
<button>Add item</button>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>