How to add Drop-Down list (`<select>`) programmatically?

javascript

prompt-engineering

responsive-design

best-practices

byAnton Shumikhin·Nov 21, 2024

Let's get your <select> drop-down living and breathing in your webpage with just 5 lines of JavaScript:

let select = document.createElement("select");
["Option 1", "Option 2", "Option 3"].forEach((text, index) => {
  let option = new Option(text, "value" + index);
  select.add(option);
});
document.body.appendChild(select);

Boom! You've got a drop-down with three selectable options.

Enriching drop-down with attributes

To identify your <select> and make it recognizable during form submissions, assign it an id and a name:

select.id = "myUniqueSelect";
select.name = "mySelectableName";

Creating option elements? You might want to adjust their attributes dynamically, like setting selected or disabled:

option.setAttribute("selected", "selected"); // Option, you're 'it'! 🎉

Grouping options: Divide and conquer

For structuring your <option> elements in a clear way, group 'em! <optgroup> is your friend:

let group = document.createElement("optgroup");
group.label = "Important Choices";
select.appendChild(group);

["Critical Option 1", "Critical Option 2"].forEach(optionText => {
  let option = document.createElement("option");
  option.textContent = optionText;
  group.appendChild(option);
});

Agile drop-down list creation

Working with dynamic data? Learn to generate <options> based on that data. You could be fetching the options from a server using XMLHttpRequest or fetch. Let's fetch some options:

fetch('https://api.example.com/options')
  .then(response => response.json())
  .then(options => {
    options.forEach(optionData => {
      let option = document.createElement("option");
      option.textContent = optionData.text;
      option.value = optionData.value;
      select.appendChild(option);
    });
  });

And always remember: Good accessibility practices go a long way in making your dropdown user-friendly for all.

Customizable function for re-use

Let's code more efficiently! A tailor-made function generates a drop-down list with specific options, and you can reuse it anytime:

function createDropdown(id, optionsData) {
  let select = document.createElement("select");
  select.id = id;

  optionsData.forEach(data => {
    let option = document.createElement("option");
    option.value = data.value;
    option.textContent = data.text;
    select.appendChild(option);
  });

  return select;
}

let mySelect = createDropdown("customSelect", [{ text: "Choice 1", value: "1" }, { text: "Choice 2", value: "2" }]);
document.body.appendChild(mySelect); // Voila! Another select element up and running! 🏃‍♂️