javascript - 如何获取名为技能 [] 的选择标签中所有选定选项的值？

Question

具有以下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>

我想在名为技能 [] 的选择标签中获取所有选定选项的值列表。

我期待结果['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

感谢您提供解决此方案的任何建议

感谢您的任何建议

---

谢谢大家，感谢您的评论和回答，我得到了答案。

这给了我名为技能 [] 的选择标签中所有选定选项的值

Array.from(document.querySelectorAll('[name="skills[]"] option:checked')).map(option => option.value)

这打印['one', 'two', 'three']

标签： javascriptcss

Answer 1

这应该可以满足您的需求。我包含了一个片段，它将在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>