如何获取名为skill []的选定标签中所有选定选项的值？

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>

我想获得名为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']

Answer 1

这应该做你正在寻找的事情。我添加了一个代码段，只要skills[]选择框发生更改，它就会控制记录变量。

document.querySelectorAll('[name="skills[]"] option:checked')

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如何在一组div中获取第一个选择标记？

在vanilla JS中，如果要选择具有匹配选择器的第一个元素，请使用document.querySelector('select[name="skills[]"]');。

document.querySelector始终返回带匹配选择器的第一个元素。并且document.querySelectorAll给节点列表i-e所有与选择器匹配的节点

＆＃13;

＆＃13;

var el = document.querySelector('select[name="skills[]"]');

console.log(el.innerHTML)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;