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
HTML DOM Select multiple Property
The HTML DOM select multiple property sets or returns whether multiple options can be selected from a drop-down list. When enabled, users can select multiple options by holding Ctrl (Windows) or Cmd (Mac) while clicking, or by using Shift to select a range.
Syntax
Following is the syntax for returning the multiple property −
object.multiple
Following is the syntax for setting the multiple property −
object.multiple = true | false
Property Values
| Value | Description |
|---|---|
true |
Allows multiple options to be selected from the drop-down list. |
false |
Only one option can be selected at a time (default behavior). |
Return Value
The property returns a Boolean value −
-
trueif multiple selection is enabled -
falseif only single selection is allowed
Example − Enabling Multiple Selection
Following example demonstrates how to enable multiple selection on a select element −
<!DOCTYPE html>
<html>
<head>
<title>Select Multiple Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>DOM Select Multiple Property Demo</h2>
<p>Select your favourite subjects:</p>
<select id="subjects" style="width: 200px; padding: 5px;">
<option value="physics">Physics</option>
<option value="maths">Mathematics</option>
<option value="chemistry">Chemistry</option>
<option value="english">English</option>
<option value="biology">Biology</option>
</select><br><br>
<button onclick="enableMultiple()" style="padding: 8px 16px; margin: 5px;">Enable Multiple</button>
<button onclick="disableMultiple()" style="padding: 8px 16px; margin: 5px;">Disable Multiple</button>
<button onclick="checkStatus()" style="padding: 8px 16px; margin: 5px;">Check Status</button>
<p id="result" style="font-weight: bold; color: blue;"></p>
<script>
function enableMultiple() {
var selectElement = document.getElementById("subjects");
selectElement.multiple = true;
document.getElementById("result").innerHTML = "Multiple selection enabled! Hold Ctrl/Cmd to select multiple options.";
}
function disableMultiple() {
var selectElement = document.getElementById("subjects");
selectElement.multiple = false;
document.getElementById("result").innerHTML = "Multiple selection disabled. Only one option can be selected.";
}
function checkStatus() {
var selectElement = document.getElementById("subjects");
var status = selectElement.multiple ? "enabled" : "disabled";
document.getElementById("result").innerHTML = "Multiple selection is currently " + status + ".";
}
</script>
</body>
</html>
The output shows a select dropdown with buttons to toggle multiple selection −
DOM Select Multiple Property Demo Select your favourite subjects: [Physics ?] (dropdown list) [Enable Multiple] [Disable Multiple] [Check Status] Multiple selection enabled! Hold Ctrl/Cmd to select multiple options.
Example − Getting Selected Values
Following example shows how to retrieve all selected values from a multiple select element −
<!DOCTYPE html>
<html>
<head>
<title>Get Multiple Selected Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Multiple Programming Languages</h2>
<select id="languages" multiple size="6" style="width: 200px; padding: 5px;">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select><br><br>
<button onclick="getSelectedValues()" style="padding: 8px 16px;">Get Selected Values</button>
<button onclick="clearSelection()" style="padding: 8px 16px; margin-left: 10px;">Clear Selection</button>
<h3>Selected Languages:</h3>
<ul id="selectedList" style="list-style-type: disc;"></ul>
<script>
function getSelectedValues() {
var selectElement = document.getElementById("languages");
var selectedOptions = selectElement.selectedOptions;
var listElement = document.getElementById("selectedList");
listElement.innerHTML = "";
if (selectedOptions.length === 0) {
listElement.innerHTML = "<li style='color: red;'>No languages selected</li>";
return;
}
for (var i = 0; i < selectedOptions.length; i++) {
var listItem = document.createElement("li");
listItem.textContent = selectedOptions[i].text + " (" + selectedOptions[i].value + ")";
listElement.appendChild(listItem);
}
}
function clearSelection() {
var selectElement = document.getElementById("languages");
selectElement.selectedIndex = -1;
document.getElementById("selectedList").innerHTML = "";
}
</script>
</body>
</html>
This example shows a multiple select list where users can select several programming languages and view their selections −
Select Multiple Programming Languages JavaScript Python ? (selected options highlighted) Java ? (selected) C# PHP Ruby [Get Selected Values] [Clear Selection] Selected Languages: ? Python (python) ? Java (java)
Key Points
-
When
multipleis set totrue, the select element changes from a dropdown to a list box display. -
Users can select multiple options using Ctrl+Click (Windows) or Cmd+Click (Mac) for individual selections.
-
Shift+Click allows range selection between two options.
-
Use the
selectedOptionsproperty to get all selected options, or loop throughoptionsand check theselectedproperty. -
The
sizeattribute controls how many options are visible in the list box when multiple is enabled.
Browser Compatibility
The multiple property is supported in all modern web browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early HTML versions.
Conclusion
The DOM select multiple property provides a simple way to enable or disable multiple option selection in select elements. When enabled, it transforms the dropdown into a list box and allows users to select multiple options using keyboard modifiers. This property is essential for creating flexible form controls that need to collect multiple values from users.
304 Views
