How to Dynamically Populate a Dropdown Based on Selection without Database Queries?

Dynamically Populate Dropdown Based on Selection

When facing the task of modifying the contents of one dropdown based on the selection made in another, understanding how to implement this functionality with JavaScript is crucial. Unlike situations that require database queries, this process can be simplified without the use of AJAX.

To assist you, we provide a concise and effective JavaScript code example that demonstrates how to populate the second dropdown (Dropdown B) based on the selection made in the first dropdown (Dropdown A). This code does not involve any external data retrieval or database queries:

<code class="javascript">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 < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}</code>

In this code, we have defined three arrays (colours, shapes, and names) containing the values that should be displayed in Dropdown B for each corresponding option in Dropdown A.

When a user selects an option from Dropdown A, the configureDropDownLists function is called. Based on the selected option, the function clears the contents of Dropdown B and repopulates it with the appropriate values from the relevant array.

You can implement this code by creating two dropdowns in your HTML document and using the onchange event handler on the first dropdown to trigger the function that populates the second dropdown.

The above is the detailed content of How to Dynamically Populate a Dropdown Based on Selection without Database Queries?. For more information, please follow other related articles on the PHP Chinese website!