How to Create Cascading Dropdown List for Forms with Select Elements using JavaScript
Dropdown Menu
How To, for Web Application
By: Chrysanthus Date Published: 17 Apr 2025
This tutorial explains How to Create Cascading Dropdown List for Forms with Select Elements using JavaScript. Imagine a tree with its single root node at the top. This root node has two children nodes. The left node has three further children nodes (grand children). The right node has two further children nodes (grand children). Each grand child has more than one child (great grand children). There are four levels in the tree.
For a coding example, consider the following JavaScript code:
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
The root node is subjectObject. The left and right children for this root node are Front-end and Back-end respectively. The children for the Front-end node are HTML, CSS and JavaScript. The children for the Back-end node are PHP and SQL. Each of these grand children has its own children within square brackets (arrays). There are four levels in the coding tree here. These nodes are subjects, topics and chapters, to be studied by students.
Now, in an HTML form element, there are three select elements. The first select element has the options: Front-end and Back-end. If the user chooses Front-end in the first select element, then the options, HTML, CSS and JavaScript will be present as options in the second select element. Otherwise, if the user chooses Back-end in the first select element, then the options, PHP and SQL will be present as options in the second select element. These options are third level nodes. In the code, each of these third level options has forth level options within square brackets (arrays). The options available in the third select element, depend on the option chosen in the second select element, relayed by the contents of its square brackets (array).
The complete code for this project, is given at the end of the tutorial. The reader should copy it into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Select an option in the first select element; select an option in the second select element and select an option in the third select element. The three selections should follow the pattern illustrated above. The reader is advised to do that, before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The webpage skeleton code to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Cascading Dropdown List for Forms with Select Elements using JavaScript</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage should have at least the first four tags in the HTML head element above. The style element will be left empty in order not to make the project unnecessarily long. There will be JavaScript. The body element will have the form element and within it, there will be three select elements.
The HTML body Element
The content of the body element is:
<h1>Cascading Dropdown Example</h1>
<form name="form1" id="form1" action="/acton.php">
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option value="" selected="selected">Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
In the form, the first select element with second level tree options, has the name "subject" and ID "subject". The second select element with third level tree options, has the name "topic" and ID "topic". The third select element with fourth level tree options, has the name "chapter" and ID "chapter". These variables are needed by JavaScript, to coordinate the options (choices) for the second and third select elements.
Note that in the code, each select element has just one option element for now, which is not supposed to be so, if there is no JavaScript. Well, the JavaScript present, will create the other option elements in the memory (RAM in the computer). Also note that the value for each option element coded above is "" . JavaScript will provide the practical value from memory. JavaScript will also provide the values for the other option elements created in memory (from memory).
JavaScript
The JavaScript needed is all in the HTML head element. It is:
<script type="text/javascript">
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
chapterSel.length = 1;
topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
//empty Chapters dropdown
chapterSel.length = 1;
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
</script>
The JavaScript is in two parts. The first part is the tree code, and this tree code will always be there, as long as the webpage is opened. The second part is a function, "window.onload" which will be executed when the webpage loads. The loading event is triggered, just after the complete webpage has arrived at the browser.
The function is divided into three segments. The first segment fills in the second level nodes into the first select element. Depending on which option the user chooses in the first select element, the second code segment provides the relevant third level nodes into the second select element. Depending on which option the user chooses in the second select element, the third code segment provides the relevant fourth level nodes into the third select element.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Cascading Dropdown List for Forms with Select Elements using JavaScript</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
chapterSel.length = 1;
topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
//empty Chapters dropdown
chapterSel.length = 1;
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
</script>
</head>
<body>
<h1>Cascading Dropdown Example</h1>
<form name="form1" id="form1" action="/acton.php">
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option value="" selected="selected">Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The reader should copy it into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Select an option in the first select element; select an option in the second select element and select an option in the third select element. The three selections should follow the pattern illustrated above.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
How to Create Pagination of Numbers with Borders
How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
How to Create a Vertical HTML Button Group with CSS
How To Create a Breadcrumb Navigation Menu
How to Create a Hover-able Dropup Menu with CSS Only
How to Create a Clickable Dropdown Menu with CSS and JavaScript
How to Create a Clickable Dropdown Menu inside a Responsive Navigation Sidebar with CSS and JavaScript
How to Create a Hover-able Dropdown Menu inside a Responsive Horizontal Navigation Bar with CSS and JavaScript
How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK