Dependent Dropdown List with JavaScript

A dependent dropdown changes the options in a second <select> according to the value chosen in the first. The original example uses three categories—Fruits, Games and Scripts—and fills the second list entirely in the browser.

Store the Dependent Options as Data Top ↑

Instead of scattering many if statements through the page, keep the relationships in one object.

const subcategories = {
  Fruits: ["Mango", "Banana", "Orange"],
  Games: ["Cricket", "Football", "Polo"],
  Scripts: ["PHP", "ASP", "JavaScript"]
};

Populate the Second Select Top ↑

function fillSubcategories(category, target) {
  target.replaceChildren(new Option("Subcategory", ""));
  for (const item of subcategories[category] ?? []) {
    target.add(new Option(item, item));
  }
}

replaceChildren() clears the old options, and new Option() creates each replacement option. This is the same purpose as the original adding-options tutorial, but with less DOM bookkeeping.

Update the List on change Top ↑

category.addEventListener("change", () => {
  fillSubcategories(category.value, subcategory);
});

The old version populated the first list during body onload and called an inline onChange handler. The modern demo loads its JavaScript with defer and registers listeners in the script.

Choose a Default Option Programmatically Top ↑

After creating the options, set target.value to a valid option value when a default is required.

fillSubcategories("Fruits", subcategory);
subcategory.value = "Mango";

Original removeAllOptions() and addOption() Pattern Top ↑

The original page taught reusable removeAllOptions() and addOption() helpers. They remain useful for understanding the DOM operations, but modern APIs make the same job shorter:

target.replaceChildren();
target.add(new Option("Mango", "Mango"));

For server-generated data, see the related PHP dynamic dropdown tutorial.

Download and Database Version Top ↑

Download the updated static dependent-dropdown example. The archive now matches the modern event-listener version shown here.

Continue with dependent dropdowns from MySQL table data.

← Listbox ← JavaScript validation

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: