select、optionタグの時短テクニック【JavaScriptで連番生成】

optionタグを手打ちすることなく、連番を自動生成するスクリプトを作りました。

HTMLとJavaScriptの「for」を組み合わせた時短テクニックです。

通常であれば、以下のようにoptionタグを書きます。

<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>

冗長的で長くなるほど作業が大変です。

今回紹介するのは、for文を使って連番を生成するスクリプトです。

for文で連番のHTMLを出力する

See the Pen
optionタグの時短 by MacLove (@maclove1)
on CodePen.

forの条件式

条件式は、

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

のように、開始と終了の値を定義します。

HTMLタグの出力

HTMLタグは document.write() で出力できます。

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

文字列内に変数を入れるには、${変数} が使えます。

document.write("<option value="1980">1980</option>")

と同じ意味です。