HTML

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

    と同じ意味です。

    関連記事