JavaScript Selection Box
Learn to create and manipulate selection boxes with JavaScript - practical examples for web development.
Introduction to Selection Boxes
Selection boxes (or dropdowns) are essential form elements that allow users to choose from multiple options. In JavaScript, you can create dynamic selection boxes that respond to user interactions, load options dynamically, and trigger actions based on selections.
- Create dynamic dropdowns that update based on user actions
- Validate form selections before submission
- Implement multi-select interfaces
- Load options from external data sources
- Create dependent dropdowns that change based on other selections
We'll explore three practical examples of selection boxes implemented with JavaScript. These examples demonstrate how to create redirecting dropdowns, dynamically add options, and implement multi-select functionality.
Example 1: Redirecting Selection Box
This example demonstrates how to redirect users to different pages based on their selection in a dropdown menu. When the user selects an option and clicks "OK", they'll be taken to the corresponding page.
// Redirecting Selection Box Implementation
function loadHtml(form) {
const index = form.list.selectedIndex;
const pages = [
"art.html", "astro.html", "bestsell.html", "business.html",
"children.html", "computer.html", "health.html", "mystery.html",
"horror.html", "nonfic.html", "romance.html", "science.html",
"scific.html", "self.html", "sports.html", "travel.html",
"young.html", "music.html"
];
if (index >= 0 && index < pages.length) {
location.href = pages[index];
}
}
Redirecting Selection Box Live Demo
Example 2: Dynamic Options
This example demonstrates how to dynamically add and remove options from a selection box using JavaScript. You can add new options to the dropdown in real-time.
// Dynamic Options Implementation
function addOption() {
const input = document.getElementById('newOption');
const value = input.value.trim();
if (value) {
const select = document.getElementById('dynamicSelect');
const option = new Option(value, value);
select.add(option);
input.value = '';
}
}
function removeSelected() {
const select = document.getElementById('dynamicSelect');
const selectedIndex = select.selectedIndex;
if (selectedIndex !== -1) {
select.remove(selectedIndex);
}
}
Dynamic Options Live Demo
Example 3: Multiple Selection
This example demonstrates a multiple selection box where users can select multiple options. The selected values are displayed in real-time below the selection box.
// Multiple Selection Implementation
function showSelected() {
const select = document.getElementById('multiSelect');
const selected = document.getElementById('selectedValues');
selected.innerHTML = '';
for (let i = 0; i < select.options.length; i++) {
if (select.options[i].selected) {
const valueDiv = document.createElement('div');
valueDiv.textContent = select.options[i].text;
selected.appendChild(valueDiv);
}
}
if (selected.children.length === 0) {
selected.innerHTML = 'No options selected';
}
}
Multiple Selection Live Demo
Selected Values:
More Examples
Explore more JavaScript examples to enhance your learning experience: