Add Options to a Select List with JavaScript

JavaScript can add <option> elements to a <select> at runtime. A concise modern pattern is to create an Option object and add it to the select.

const monthList = document.getElementById("monthList");
monthList.add(new Option("January", "January"));

This keeps the original tutorial purpose while avoiding old global form references. You can also remove options or move options between listboxes.

Demo: populate a month list → Demo: select current month →

Add One Option Top ↑

function addOption(select, text, value) {
  select.add(new Option(text, value));
}

addOption(monthList, "January", "January");

Add Options from an Array Top ↑

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const monthList = document.getElementById("monthList");

months.forEach((month) => {
  monthList.add(new Option(month, month));
});

<label for="monthList">Month</label>
<select id="monthList" name="month">
  <option value="">Month list</option>
</select>

Select One Option by Default Top ↑

After adding the options, assign the select’s value. To select the current month, getMonth() returns an index from 0 to 11.

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const currentMonth = months[new Date().getMonth()];
monthList.value = currentMonth;

See JavaScript getMonth() and the date selection projects for related date examples.

createElement() Alternative Top ↑

const option = document.createElement("option");
option.value = "January";
option.textContent = "January";
monthList.append(option);

new Option() is convenient for select options; document.createElement() is the general DOM approach. See createElement().

Adding Options to a Datalist Top ↑

A <datalist> provides suggestions while still allowing other input. See the JavaScript datalist example and HTML datalist basics.

Related Listbox Tutorials Top ↑

Remove options · Move options between lists · Select change event · JavaScript validation

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: