【html】【javascript】セレクトボックスのoptionを自動生成し、今日現在の日付を初期設定する方法
以下のような、今日現在の日付が表示されるセレクトボックスをjavascriptで生成させる方法を紹介します。
まずはHTML。あとはjavascriptで生成します。
<select name="year" id="year"></select>
<select name="month" id="month"></select>
<select name="day" id="day"></select>
表示させる要素と今日の日付をそれぞれ取得
let year = document.getElementById("year");
let month = document.getElementById("month");
let day = document.getElementById("day");
const date = new Date();
const thisYear = date.getFullYear();
年のセレクトボックスのoptionを生成
for (let i = 1930; i <= thisYear; i++) {
let option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = i + "年";
year.appendChild(option);
if (option.value == thisYear) { //値が今年だったら
option.setAttribute("selected", true); // selectedの属性を付与
}
}
月のセレクトボックスのoptionを生成
for (let i = 1; i <= 12; i++) {
let option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = i + "月";
month.appendChild(option);
if (option.value == date.getMonth() + 1) { //値が今月だったら、「+1」 をお忘れなく
option.setAttribute("selected", true); // selectedの属性を付与
}
}
日のセレクトボックスのoptionを生成
for (let i = 1; i <= 31; i++) {
let option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = i + "日";
day.appendChild(option);
if (option.value == date.getDate()) { //値が今日だったら
option.setAttribute("selected", true); // selectedの属性を付与
}
}
完成したjavascriptのコード
let year = document.getElementById("year");
let month = document.getElementById("month");
let day = document.getElementById("day");
const date = new Date();
const thisYear = date.getFullYear();
for (let i = 1930; i <= thisYear; i++) {
let option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = i + "年";
year.appendChild(option);
if (option.value == thisYear) {
option.setAttribute("selected", true);
}
}
for (let i = 1; i <= 12; i++) {
let option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = i + "月";
month.appendChild(option);
if (option.value == date.getMonth() + 1) {
option.setAttribute("selected", true);
}
}
for (let i = 1; i <= 31; i++) {
let option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = i + "日";
day.appendChild(option);
if (option.value == date.getDate()) {
option.setAttribute("selected", true);
}
}

createElement()で要素を作る
setAttribute()で属性「value」と「selected」を付与
appendChild()で要素の中に子要素を生成
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク