How to Create a Cascading Dropdown List with JavaScript

Dropdown lists are a common user interface element in many web applications.

They provide a convenient way for users to select an option from a list of choices.

In this tutorial, we will learn how to create a cascading dropdown list using JavaScript.

A cascading dropdown list means that the options available in the second dropdown depend on the selection made in the first dropdown.

Understanding the HTML Structure

The HTML structure for a dropdown list is simple.

You can create a dropdown list by using the select element along with the option element.

The select element acts as the container for the list of options, while the option elements represent the individual options.

<select id="firstDropdown">
  <option value="">Please select</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="secondDropdown">
  <option value="">Please select</option>
</select>

In the above code, the first dropdown has the id attribute of “firstDropdown” and the second dropdown has the id attribute of “secondDropdown”.

This will make it easier for us to reference these elements in our JavaScript code.

JavaScript Code

Now that we have the HTML structure in place, we can write the JavaScript code to create the cascading dropdown list.

We will use the onchange event to detect when the selection in the first dropdown changes.

When this event is triggered, we will update the options in the second dropdown based on the selection made in the first dropdown.

document.getElementById("firstDropdown").onchange = function() {
  var firstDropdownSelection = this.value;

  var secondDropdownOptions = {
    option1: ["suboption1a", "suboption1b"],
    option2: ["suboption2a", "suboption2b"],
    option3: ["suboption3a", "suboption3b"]
  };

  var secondDropdown = document.getElementById("secondDropdown");
  secondDropdown.innerHTML = "";

  if (firstDropdownSelection in secondDropdownOptions) {
    for (var i = 0; i < secondDropdownOptions[firstDropdownSelection].length; i++) {
      var option = document.createElement("option");
      option.value = secondDropdownOptions[firstDropdownSelection][i];
      option.text = secondDropdownOptions[firstDropdownSelection][i];
      secondDropdown.add(option);
    }
  }
};

In the above code, we use the document.getElementById method to get a reference to the first dropdown element.

We then use the onchange property to attach an event handler function to the dropdown.

This function is executed whenever the selection in the first dropdown changes.

We then create an object called secondDropdownOptions which contains the options for the second dropdown for each selection in the first dropdown.

This object is used to dynamically update the options in the second dropdown based on the selection made in the first dropdown.

We use the innerHTML property to clear any existing options in the second dropdown.

Then, we check if the selected option in the first dropdown is present in the secondDropdownOptions object.

If it is, we use a for loop to iterate over the options for that selected value and dynamically create option elements using the document.createElement method.

Finally, we use the add method to add each newly created option to the second dropdown.

Conclusion

In this post, we learned how to create a cascading dropdown list using JavaScript.

We first looked at the HTML structure for a dropdown list and then used JavaScript to dynamically update the options in the second dropdown based on the selection made in the first dropdown.

This is a useful technique for improving the user experience in web applications by allowing users to make more informed selections.