HTMLのプルダウンメニューをfor文で作る【連番生成】

HTMLのプルダウンメニューをfor文で作成する方法ご紹介します。

JavaScriptで連番生成する方法です。

for文を使わないと、以下のように長ったらしく書かなければいけません。

HTMLのみで書いたケース

<select name="year">
    <option>1980</option>
    <option>1981</option>
    <option>1982</option>
    <option>1983</option>
    <option>1984</option>
    <option>1985</option>
    <option>1986</option>
    <option>1987</option>
    <option>1988</option>
    <option>1989</option>
    <option>1990</option>
    <option>1991</option>
</select>

JavaScriptを使えば楽ちんです。

JavaScriptのfor文で連番を生成する

See the Pen
連番のselect要素を生成する by MAC-YA (@maclove1)
on CodePen.

forの条件式

for (var i = 1980; i <= 2022; i++)

連番を開始する値と終了の値を指定します。

HTMLタグを出力する

document.write() でHTMLタグを出力します。

document.write(`<option value="${i}">${i}</option>`)

以上です。