How to Populately Dropdowns Based on User Selection?

Populating Dropdowns Based on Selection

When developing forms with multiple dropdowns, it can be beneficial to populate the options in one dropdown based on the selection made in another. This allows for a more user-friendly experience by narrowing down the choices and making data input more efficient.

One approach to achieving this functionality involves using JavaScript to dynamically update the content of the dependent dropdown. Here's an example that demonstrates how to populate one dropdown (B) based on the selection in another (A):

<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);
}

This JavaScript function takes two parameters, ddl1 and ddl2, which represent the two dropdowns. It first initializes arrays with the options that will be displayed in each dropdown.

Next, a switch statement is used to handle the selection made in ddl1. Depending on the value of ddl1, it clears the options in ddl2 and populates it with the appropriate options. The createOption function is used to create and add each option to ddl2.

In the HTML, two dropdowns should be defined:

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select></code>

When the user selects an option in ddl1, the onchange event triggers the configureDropDownLists function, which updates the options in ddl2 accordingly. This approach provides a convenient way to populate one dropdown based on the selection in another, enhancing the usability of forms.

The above is the detailed content of How to Populately Dropdowns Based on User Selection?. For more information, please follow other related articles on the PHP Chinese website!