querySelector на теге <select>с несколькими атрибутами

Question

Я хочу получить массив значений, который выбирается тегом <select> с несколькими атрибутами, используя querySelector, НЕ jQuery.

Я гуглил, но Googleсписок только о выборе нескольких элементов с помощью querySelector.В моем случае мне нужен один элемент select с несколькими атрибутами.

Я прекратил поиск по этому, я просто пытался кодировать с этим тегом <select>.

<select id="bgmSources" className="bgmSelector" multiple="multiple"> 
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

В JavaScript,Я попробовал, как показано ниже, но ничего не получилось.

const values = document.querySelector("#bgmSources").value;
console.log(values);

---

const selectedOptions = document.querySelectorAll("#bgmSources option:selected");
selectedOptions.forEach(option => console.log(option));

Есть ли способ получить массив выбранных опций в теге <select> с несколькими атрибутами?

Answer 1

Вы можете выбрать дочерние параметры, которые :checked, а затем получить значения каждого из этих выбранных параметров:

bgmSources.onchange = () => {
  const selectedOptionVals = Array.from(
    bgmSources.querySelectorAll(':scope > option:checked'),
    ({ value }) => value
  );
  console.log(selectedOptionVals);
};

<select id="bgmSources" className="bgmSelector" multiple="multiple"> 
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

К сожалению, вы не можете использовать .value, чтобы получить значимый результат для multiple, и вам придется использовать :checked, а не :selected.