Demo: Add Options to a Select from an Array

The month list below starts with one placeholder. JavaScript adds all twelve months after the DOM is ready.

The original demo made its source available to users. The complete JavaScript and HTML used here remain available below.

JavaScript Used in This Demo 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));
});

HTML Used in This Demo Top ↑

<form action="yourpage.php" method="post">
  <label for="monthList">Month</label>
  <select id="monthList" name="Month_list">
    <option value="">Month list</option>
  </select>
</form>

Adding options tutorial · Listbox · Select the current month by default

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: