The Select multiple property in HTML DOM is used to set or return whether more than one option can be selected from a drop-down list or not. It returns true if multiple selection in the drop-down list is enabled, otherwise returns false.
Syntax:
- It returns the select multiple property.
selectObject.multiple
- It is used to set select multiple property.
selectObject.multiple = true|false
Property Values: It contains two values either true or false which is used to specify whether multiple selection in the drop-down list is enabled or not. It is false by default.
Return Values: It returns true if multiple selection in the drop-down list is enabled, otherwise returns false.
Below program illustrates the Select multiple property in HTML DOM:
Example: This example uses Select multiple property to allow multiple selection in a drop-down list.
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM Select multiple Property
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2 style="font-family: Impact;">
Select multiple Property
</h2><br>
Select your preferred course from the drop-down list:<br>
<select id="myCourses" size="4">
<option value="C++">c++</option>
<option value="Placement">Placement</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
</select>
<p>
To enable multiple selection, double-click the
"Enable Multiple Selection" button.
</p>
<button ondblclick="myGeeks()">
Enable Multiple Selection
</button>
<p id="GFG"></p>
<script>
function myGeeks() {
document.getElementById("myCourses").multiple
= true;
document.getElementById("GFG").innerHTML
= "Multiple options can be selected now"
+ " from the drop down list.";
}
</script>
</body>
</html>
|
Output:
Before Clicking the button:
After Clicking the button:
Supported Browsers: The browser supported by DOM Select multiple Property are listed below:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera