Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to select multiple options in a dropdown list with JavaScript?
In JavaScript, you can enable multiple selection in a dropdown list by setting the multiple property to true. This allows users to select multiple options by holding Ctrl (Windows) or Cmd (Mac) while clicking.
Syntax
function enableMultipleSelection() {
document.getElementById("selectId").multiple = true;
}
How It Works
The multiple property controls whether a select element allows multiple selections. When set to true, users can select multiple options using keyboard modifiers:
- Ctrl + Click (Windows/Linux) to select multiple individual options
- Cmd + Click (Mac) to select multiple individual options
- Shift + Click to select a range of options
Example: Basic Multiple Selection
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fruits">Select Fruits:</label>
<select id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
</select>
<br><br>
<button type="button" onclick="enableMultiple()">Enable Multiple Selection</button>
<button type="button" onclick="getSelected()">Get Selected Values</button>
</form>
<p id="result"></p>
<p><strong>Tip:</strong> After enabling multiple selection, hold Ctrl and click to select multiple options.</p>
<script>
function enableMultiple() {
document.getElementById("fruits").multiple = true;
document.getElementById("result").innerHTML = "Multiple selection enabled!";
}
function getSelected() {
const select = document.getElementById("fruits");
const selected = Array.from(select.selectedOptions).map(option => option.value);
document.getElementById("result").innerHTML = "Selected: " + selected.join(", ");
}
</script>
</body>
</html>
Example: Pre-enabled Multiple Selection
You can also enable multiple selection directly in HTML using the multiple attribute:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="colors">Select Colors:</label>
<select id="colors" multiple size="4">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br><br>
<button type="button" onclick="showSelections()">Show Selected</button>
</form>
<div id="output"></div>
<script>
function showSelections() {
const select = document.getElementById("colors");
const selectedValues = [];
for (let option of select.selectedOptions) {
selectedValues.push(option.value);
}
document.getElementById("output").innerHTML =
selectedValues.length > 0 ?
"You selected: " + selectedValues.join(", ") :
"No options selected";
}
</script>
</body>
</html>
Getting Selected Values
To retrieve all selected values from a multiple-selection dropdown:
// Method 1: Using selectedOptions
const select = document.getElementById("mySelect");
const values = Array.from(select.selectedOptions).map(option => option.value);
// Method 2: Using options array
const selectedValues = [];
for (let i = 0; i < select.options.length; i++) {
if (select.options[i].selected) {
selectedValues.push(select.options[i].value);
}
}
Key Points
- Use
multiple = trueto enable multiple selection - The
sizeattribute controls how many options are visible - Access selected options via
selectedOptionsproperty - Users need to hold Ctrl/Cmd while clicking to select multiple items
Conclusion
Setting the multiple property to true enables multi-selection in dropdown lists. Use selectedOptions to retrieve all selected values efficiently.
Updated on: 2026-03-15T23:18:59+05:30
12K+ Views
Advertisements