Выбор нескольких входных данных — это обычная функция веб-форм, которая позволяет пользователям выбирать несколько вариантов из списка. При работе с такими входными данными вам может потребоваться извлечь выбранные значения для дальнейшей обработки или проверки. В этой статье мы рассмотрим различные методы достижения этой цели с помощью JavaScript, а также примеры кода.

Метод 1: манипулирование DOM в JavaScript
Пример кода:

const selectElement = document.getElementById('mySelect');
const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);
console.log(selectedValues);

Метод 2: jQuery
Пример кода:

const selectedValues = $('#mySelect').val();
console.log(selectedValues);

Метод 3: оператор расширения JavaScript ES6
Пример кода:

const selectElement = document.getElementById('mySelect');
const selectedValues = [...selectElement.selectedOptions].map(option => option.value);
console.log(selectedValues);

Метод 4: использование цикла
Пример кода:

const selectElement = document.getElementById('mySelect');
const selectedValues = [];
for (let i = 0; i < selectElement.options.length; i++) {
  if (selectElement.options[i].selected) {
    selectedValues.push(selectElement.options[i].value);
  }
}
console.log(selectedValues);

Метод 5: метод JavaScript ES6 Array.from()
Пример кода:

const selectElement = document.getElementById('mySelect');
const selectedValues = Array.from(selectElement.selectedOptions, option => option.value);
console.log(selectedValues);

Метод 6. Использование метода фильтрации JavaScript ES6
Пример кода:

const selectElement = document.getElementById('mySelect');
const selectedValues = Array.from(selectElement.options)
  .filter(option => option.selected)
  .map(option => option.value);
console.log(selectedValues);

В этой статье мы рассмотрели несколько методов извлечения значений выбора нескольких входных данных в JavaScript. Предпочитаете ли вы использовать простой JavaScript, jQuery или новые функции ES6, у вас есть множество вариантов на выбор. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и используйте его, чтобы легко получить выбранные значения из нескольких выбранных вами входных данных.