Populate one dropdown based on selection in another using JavaScript

When faced with the task of dynamically updating the options in one dropdown based on the selection made in another, it's essential to avoid unnecessary complexities like database queries. Let's explore a straightforward JavaScript-based solution that accomplishes this without the need for AJAX calls.

To illustrate this approach, consider a scenario where you have two dropdown lists: Dropdown A with options such as "Colors," "Shapes," and "Names" and Dropdown B. We want to populate the options in Dropdown B based on the selection made in Dropdown A.

Sample Code

The following JavaScript function demonstrates how to achieve this functionality:

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
HTML Markup
The following HTML markup includes two dropdown lists:
ColoursShapesNames
Usage
To use this functionality, simply call the configureDropDownLists function, passing the first dropdown (ddl1) and the second dropdown (ddl2) as arguments. The function will handle the dynamic population of Dropdown B based on the selection made in Dropdown A.
This code snippet demonstrates a complete working solution, allowing you to dynamically populate one dropdown based on the selection made in another using JavaScript, without the need for database calls or AJAX requests.