How to Populate One Drop-Down List Based on a Selection in Another Using JavaScript?

Populating One Dropdown Based on Selection in Another

When working with dropdown lists, it is often necessary to change the content of one dropdown based on the selection in another. In JavaScript, this can be achieved without the need for database queries. Here's an example of how to do it:

The provided code is divided into two functions:

1. configureDropDownLists(ddl1, ddl2): This function takes two arguments, which are the two dropdown lists that will be linked. It uses the value of the first dropdown (ddl1) to determine which options to populate in the second dropdown (ddl2).
2. createOption(ddl, text, value): This helper function creates an option element for the dropdown list and adds it to the dropdown's options collection.

In the example HTML code, we have two dropdown lists: ddl1 and ddl2. When a user selects an option in the ddl1 dropdown list, the onchange event is triggered, which calls the configureDropDownLists() function.

The configureDropDownLists() function first clears the options from ddl2 and then adds new options based on the value selected in ddl1. For example, if the user selects "Colors" in ddl1, the function populates ddl2 with options for colors like "Black", "White", and "Blue."

By following the code provided, you can easily populate one dropdown based on the selection in another without the need for complex database queries.

The above is the detailed content of How to Populate One Drop-Down List Based on a Selection in Another Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!