How to populate one dropdown based on selection in another with JavaScript?

Sometimes, we want to populate one dropdown based on selection in another with JavaScript.

In this article, we’ll look at how to populate one dropdown based on selection in another with JavaScript.

How to populate one dropdown based on selection in another with JavaScript?

To populate one dropdown based on selection in another with JavaScript, we can create our own functions to get the selected value of the first drop down.

Then we can populate the options of the 2nd drop down based on the value of the first drop down.

For instance, we write:

<select id="ddl" >
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

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

to add drop down.

When we select an option from the first drop down, then the 2nd drop down will have options populated.

To do this, we write:

const ddl = document.getElementById('ddl')
const ddl2 = document.getElementById('ddl2')

const createOption = (ddl, text, value) => {
  const opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

const configureDropDownLists = (ddl1, ddl2) => {
  const colours = ['Black', 'White', 'Blue'];
  const shapes = ['Square', 'Circle', 'Triangle'];
  const names = ['John', 'David', 'Sarah'];
  ddl2.options.length = 0

  switch (ddl1.value) {
    case 'Colours':
      for (const c of colours) {
        createOption(ddl2, c, c);
      }
      break;
    case 'Shapes':
      for (const s of shapes) {
        createOption(ddl2, s, s);
      }
      break;
    case 'Names':
      for (const n of names) {
        createOption(ddl2, n, n);
      }
      break;
    default:
      break;
  }
}

ddl.addEventListener('change', () => {
  configureDropDownLists(ddl, ddl2)
})

We select both drop downs with document.getElementById.

Then we define the createOption function that takes the ddl select element, and the text and value of the options.

We then create the option element with document.createElement.

And we set the text and value properties of the opt option element to set the corresponding attributes with the same name.

Then we call ddl.options.add with opt to add the opt option element into the select element as its child.

Next, we have the configureDropDownLists function that takes both ddl and ddl2 select elements.

ddl1 is the first drop down and ddl2 is the 2nd.

We have some options for the 2nd drop down defined in the colors, shapes and names arrays.

Then we get the selected value from the ddl1 drop with ddl1.value.

And then we have a switch statement to populate the ddl2 drop down according to ddl1‘s value.

In each case statement, we loop through the option arrays with the for-of loop an call createOption in the body.

Finally, we call ddl.addEventListener with 'change' to add the change event listener for the first drop down.

In the event handler, we call configureDropDownList with both drop downs to update the options of the 2nd according to the selected value of the first.

Conclusion

To populate one dropdown based on selection in another with JavaScript, we can create our own functions to get the selected value of the first drop down.

Then we can populate the options of the 2nd drop down based on the value of the first drop down.