How to get all selected values of a multiple select box?

Breaking down the methods

While the one-liner above is slick and gets the job done, it's time we delve into how it works, and explore different ways to get the same result.

Using the selectedOptions property

HTML5 dished up a nifty selectedOptions property:

const selectBox = document.getElementById('selectId');
const selectedValues = Array.from(selectBox.selectedOptions).map(option => option.value);
// "Waiter, I'll have what `selectOptions` is having!"


The classic loop

For those who love to go old-school, or are on a date with an environment unaware of selectedOptions, here's your black tie:

const selected = [];
const options = document.getElementById('selectId').options;
for (let opt of options) {
  if (opt.selected) selected.push(opt.value);
  // "Hop onto the array if you're selected"
}


The jQuery magicians 🎩

This piece focuses on vanilla JavaScript. But here's a little something for you jQuery magicians out there:

let selected = $('#selectId').val();
// jQuery says, "Why climb trees when you can fly?"


Managing the selected attribute

Watch out for the selected attribute, the ninja of HTML, as it signifies default selections:

document.querySelector('#selectId option').setAttribute('selected', true);
// "You, first one, you are the chosen one!"


Utilizing modern JavaScript

Turn heads with these modern JavaScript methods that can help in this task.

Destructuring with querySelectorAll

querySelectorAll with destructuring lets you maintain your swag, while making your code more readable:

const options = document.querySelectorAll('#selectId option:checked');
const values = [...options].map(({ value }) => value);
// "Look Ma, no hands for extraction!"


Short and sweet with filter and map

Use a filter and map combo for concise, lover's tiff kind of code:

const options = document.getElementById('selectId').options;
const selected = Array.from(options).filter(o => o.selected).map(o => o.value);
// "Only take the ones that have been touched!"


Considerations for a winning solution

• Evidence is key: make sure the ID is correct, and the multiple attribute is chillin' on the <select> tag.
• Make the chosen ones feel special: default selected options should be decided when the page plays the entrance music.
• Use console.log() to cross-verify your selection. It's like making sure you got the right lottery ticket numbers.
• Remember to suit up your modern syntax for older browsers with Babel or similar transpilation tools.

Debugging tips

Here are some tips to keep the bugs at bay.

Checking initial values

Pre-selected options can be sneaky. Keep them in check:

console.log(document.getElementById('selectId').value);
// "Hey, what’s your opening line?"


Accurate retrieval across browsers

Test rigorously across browsers and devices. Ensure your code climbs all trees and not just the ones in your backyard.