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 type Property
The HTML DOM Select type property is a read-only property that returns the type of form control for a select element. For HTML <select> elements, this property always returns "select-one" for single-selection dropdowns or "select-multiple" for multi-selection lists.
Syntax
Following is the syntax for accessing the type property −
selectObject.type
Return Value
The type property returns a string value −
-
"select-one"− For single-selection dropdown lists (default behavior) -
"select-multiple"− For multi-selection lists (whenmultipleattribute is present)
Example − Single Selection Dropdown
Following example demonstrates the type property with a standard dropdown list −
<!DOCTYPE html>
<html>
<head>
<title>Select Type Property - Single Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Single Selection Dropdown</h2>
<p>Select your favorite subject:</p>
<select id="subjectList" style="padding: 5px; font-size: 14px;">
<option value="physics">Physics</option>
<option value="math">Mathematics</option>
<option value="chemistry">Chemistry</option>
<option value="english">English</option>
</select>
<br><br>
<button onclick="showType()" style="padding: 8px 16px; background: #007bff; color: white; border: none; cursor: pointer;">Show Type</button>
<p id="result" style="font-weight: bold; color: #333;"></p>
<script>
function showType() {
var selectElement = document.getElementById("subjectList");
document.getElementById("result").innerHTML = "Type: " + selectElement.type;
}
</script>
</body>
</html>
The output shows the type property value for a single-selection dropdown −
Single Selection Dropdown Select your favorite subject: [Physics ?] [Show Type] Type: select-one
Example − Multiple Selection List
Following example demonstrates the type property with a multi-selection list −
<!DOCTYPE html>
<html>
<head>
<title>Select Type Property - Multiple Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Selection List</h2>
<p>Select multiple programming languages (hold Ctrl/Cmd):</p>
<select id="languageList" multiple size="4" style="padding: 5px; font-size: 14px; width: 150px;">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
<br><br>
<button onclick="checkType()" style="padding: 8px 16px; background: #28a745; color: white; border: none; cursor: pointer;">Check Type</button>
<p id="output" style="font-weight: bold; color: #333;"></p>
<script>
function checkType() {
var multiSelect = document.getElementById("languageList");
document.getElementById("output").innerHTML = "Type: " + multiSelect.type;
}
</script>
</body>
</html>
The output shows the type property value for a multi-selection list −
Multiple Selection List Select multiple programming languages (hold Ctrl/Cmd): [HTML ] [CSS ] [JavaScript] [Python ] [Check Type] Type: select-multiple
Example − Comparing Different Select Types
Following example compares the type property values for both single and multiple selection lists −
<!DOCTYPE html>
<html>
<head>
<title>Select Type Property Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Type Property Comparison</h2>
<h3>Single Selection:</h3>
<select id="singleSelect" style="padding: 5px; margin-bottom: 10px;">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<h3>Multiple Selection:</h3>
<select id="multipleSelect" multiple size="3" style="padding: 5px; margin-bottom: 15px;">
<option>Choice A</option>
<option>Choice B</option>
<option>Choice C</option>
</select>
<br>
<button onclick="compareTypes()" style="padding: 8px 16px; background: #17a2b8; color: white; border: none; cursor: pointer;">Compare Types</button>
<div id="comparison" style="margin-top: 15px; font-weight: bold;"></div>
<script>
function compareTypes() {
var single = document.getElementById("singleSelect");
var multiple = document.getElementById("multipleSelect");
document.getElementById("comparison").innerHTML =
"Single select type: " + single.type + "<br>" +
"Multiple select type: " + multiple.type;
}
</script>
</body>
</html>
The output displays both type property values side by side −
Select Type Property Comparison Single Selection: [Option 1 ?] Multiple Selection: [Choice A] [Choice B] [Choice C] [Compare Types] Single select type: select-one Multiple select type: select-multiple
Key Points
- The type property is read-only and cannot be modified programmatically
- It automatically reflects the presence or absence of the
multipleattribute - This property is useful for form validation and dynamic form handling
- The type property is consistent across all modern browsers
Browser Compatibility
The Select type property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 5.5+. It is part of the standard DOM Level 1 specification.
Conclusion
The HTML DOM Select type property provides a simple way to determine whether a select element allows single or multiple selections. It returns "select-one" for standard dropdowns and "select-multiple" for multi-selection lists, making it useful for form processing and validation scripts.
215 Views
