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>")
と同じ意味です。
スポンサーリンク