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 size Property
The HTML DOM select.size property returns and modifies the value of the size attribute of a dropdown list. This property controls how many options are visible at once in the select element without scrolling.
Syntax
Following is the syntax for returning the size value −
selectObject.size
Following is the syntax for setting the size value −
selectObject.size = number
Parameters
The size property accepts the following parameter −
number − A positive integer that specifies how many options should be visible in the dropdown list without scrolling. If not specified or set to 1, the select element appears as a dropdown. If greater than 1, it appears as a list box.
Return Value
The property returns a number representing the current size value of the select element.
Example − Changing Select Size
Following example demonstrates how to change the size property of a select element −
<!DOCTYPE html>
<html>
<head>
<title>Select Size Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
.select-box {
width: 200px;
margin: 20px auto;
padding: 5px;
font-size: 14px;
border: 2px solid #333;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin: 10px;
border-radius: 5px;
}
.btn:hover {
background-color: #45a049;
}
.info {
margin: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>Select Size Property Demo</h1>
<p>Select your favorite subject:</p>
<select id="subjectList" class="select-box">
<option value="physics">Physics</option>
<option value="maths">Mathematics</option>
<option value="chemistry">Chemistry</option>
<option value="english">English</option>
<option value="economics">Economics</option>
<option value="biology">Biology</option>
</select>
<br>
<button onclick="changeToListBox()" class="btn">Show as List (Size 4)</button>
<button onclick="changeToDropdown()" class="btn">Show as Dropdown (Size 1)</button>
<button onclick="showCurrentSize()" class="btn">Show Current Size</button>
<div id="info" class="info"></div>
<script>
function changeToListBox() {
var selectElement = document.getElementById("subjectList");
selectElement.size = 4;
document.getElementById("info").innerHTML = "Size changed to 4 - appears as list box";
}
function changeToDropdown() {
var selectElement = document.getElementById("subjectList");
selectElement.size = 1;
document.getElementById("info").innerHTML = "Size changed to 1 - appears as dropdown";
}
function showCurrentSize() {
var selectElement = document.getElementById("subjectList");
var currentSize = selectElement.size;
document.getElementById("info").innerHTML = "Current size: " + currentSize;
}
</script>
</body>
</html>
The output shows a select element that can be transformed between dropdown and list box formats by changing the size property.
Example − Dynamic Size Adjustment
Following example shows how to dynamically adjust the size based on the number of options −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Select Size</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
}
.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
#dynamicSelect {
width: 100%;
margin: 15px 0;
padding: 5px;
font-size: 14px;
border: 1px solid #ccc;
}
.btn {
background-color: #007bff;
color: white;
padding: 8px 16px;
border: none;
margin: 5px;
cursor: pointer;
border-radius: 4px;
}
.status {
margin-top: 15px;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Dynamic Select Size Demo</h2>
<select id="dynamicSelect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<br>
<button onclick="addOption()" class="btn">Add Option</button>
<button onclick="removeOption()" class="btn">Remove Option</button>
<button onclick="autoResize()" class="btn">Auto Resize</button>
<div id="status" class="status">
Options: 3, Size: 1
</div>
</div>
<script>
var optionCount = 3;
function addOption() {
var select = document.getElementById("dynamicSelect");
optionCount++;
var option = document.createElement("option");
option.text = "Option " + optionCount;
select.appendChild(option);
updateStatus();
}
function removeOption() {
var select = document.getElementById("dynamicSelect");
if (select.options.length > 1) {
select.removeChild(select.lastElementChild);
optionCount--;
updateStatus();
}
}
function autoResize() {
var select = document.getElementById("dynamicSelect");
var totalOptions = select.options.length;
select.size = Math.min(totalOptions, 5); // Max size of 5
updateStatus();
}
function updateStatus() {
var select = document.getElementById("dynamicSelect");
var totalOptions = select.options.length;
var currentSize = select.size;
document.getElementById("status").innerHTML =
"Options: " + totalOptions + ", Size: " + currentSize;
}
</script>
</body>
</html>
This example demonstrates adding and removing options dynamically, with an auto-resize feature that adjusts the size property based on the number of available options.
Key Points
When
size = 1(default), the select element appears as a dropdown menu.When
size > 1, the select element appears as a list box showing multiple options.The size property is both readable and writable via JavaScript.
Setting size to a value larger than the number of options will show empty space.
The property accepts only positive integers; negative values or zero are ignored.
Browser Compatibility
The select.size property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early versions.
Conclusion
The HTML DOM select size property provides control over the visual presentation of select elements, allowing developers to switch between dropdown and list box formats dynamically. This property is useful for creating adaptive user interfaces that can adjust based on the number of available options or user preferences.
163 Views
