簡単にHTMLの年月日のプルダウンを作る方法

簡単にHTMLの年月日のプルダウンを作る方法

  • 2016-03-08  最終更新日:2016-04-11

よくフォームなどで年月日のプルダウンを作成するときが多いのでちょっと簡単にプルダンを作成する方法ご紹介します。

1950年から2016年までのプルダウンを書くのはとても大変なのでプログラムを書いて自動化してしまいましょう。

一度書いてしまえばあとは使いまわしていけるのでとても楽です。1〜12月と1〜31日も合わせて作っていきます。ついでに都道府県のプルダウンも作ってみましょう。


JSでのサンプル

まずは年月日のプルダウンプログラム

date.js

(function() {
  'use strict';

  /*
    今日の日付データを変数todayに格納
   */
  var optionLoop, this_day, this_month, this_year, today;
  today = new Date();
  this_year = today.getFullYear();
  this_month = today.getMonth() + 1;
  this_day = today.getDate();

  /*
    ループ処理(スタート数字、終了数字、表示id名、デフォルト数字)
   */
  optionLoop = function(start, end, id, this_day) {
    var i, opt;

    opt = null;
    for (i = start; i <= end ; i++) {
      if (i === this_day) {
        opt += "<option value='" + i + "' selected>" + i + "</option>";
      } else {
        opt += "<option value='" + i + "'>" + i + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };


  /*
    関数設定(スタート数字[必須]、終了数字[必須]、表示id名[必須]、デフォルト数字[省略可能])
   */
  optionLoop(1950, this_year, 'id_year', this_year);
  optionLoop(1, 12, 'id_month', this_month);
  optionLoop(1, 31, 'id_day', this_day);
})();

このプログラムは即時関数の中に入れていきます。

(function() {
	'use strict';
	// プログラムを書きます
})();

上記の即時関数の中に書いて行きます。

var optionLoop, this_day, this_month, this_year, today;
today = new Date();
this_year = today.getFullYear();
this_month = today.getMonth() + 1;
this_day = today.getDate();

この上の文は変数を初期化してからtoday変数に今日の日付を入れます。 今回はデフォルト値が本日の日なのでこれは必ずしも必須ではないです。

optionLoop = function(start, end, id, this_day) {
	var i, opt;

	opt = null;

	for (i = start; i <= end ; i++) {
		if (i === this_day) {
			opt += "<option value='" + i + "' selected>" + i + "</option>";
		} else {
			opt += "<option value='" + i + "'>" + i + "</option>";
		}
	}
	return document.getElementById(id).innerHTML = opt;
};

上記が関数です。基本的には数字を入れて回すというものです。 function(start, end, id, this_day) startがスタートの数字、endが最後の数字、idはhtml側で出力する際に必要なid名、this_dayがデフォルト値です、今回は本日の日付にしてあります。

optionLoop(1950, this_year, 'id_year', this_year);

この関数を使って出力します。1950年から今年までをid_yearというid名に出力しています。

optionLoop(2000, 2015, 'id_year', 2005);

上記のように書けば2000から2015年までをid_yearに出力する、デフォルト値は2005年ということになります。簡単ですね。あとはhtml側でselect要素にid名をつけておいておけばjavascriptが処理をしてくれます。

index.html

<select name="year" id="id_year">
<!-- option要素がjavascriptのプログラムにより挿入される、id_year -->
</select>
<select name="month" id="id_month">
<!-- option要素がjavascriptのプログラムにより挿入される、id_month -->
</select>
<select name="day" id="id_day">
<!-- option要素がjavascriptのプログラムにより挿入される、id_day -->
</select>

下記は全文です、コピペで確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>年月日表示の練習</title>
</head>
<body>
<select name="year" id="id_year">
</select>
<select name="month" id="id_month">
</select>
<select name="day" id="id_day">
</select>
<script>
(function() {
  'use strict';

  /*
    今日の日付データを変数todayに格納
   */
  var optionLoop, this_day, this_month, this_year, today;
  today = new Date();
  this_year = today.getFullYear();
  this_month = today.getMonth() + 1;
  this_day = today.getDate();

  /*
    ループ処理(スタート数字、終了数字、表示id名、デフォルト数字)
   */
  optionLoop = function(start, end, id, this_day) {
    var i, opt;

    opt = null;
    for (i = start; i <= end ; i++) {
      if (i === this_day) {
        opt += "<option value='" + i + "' selected>" + i + "</option>";
      } else {
        opt += "<option value='" + i + "'>" + i + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };


  /*
    関数設定(スタート数字[必須]、終了数字[必須]、表示id名[省略可能]、デフォルト数字[省略可能])
   */
  optionLoop(1950, this_year, 'id_year', this_year);
  optionLoop(1, 12, 'id_month', this_month);
  optionLoop(1, 31, 'id_day', this_day);
})();

</script>
</body>
</html>

⇒デモを見てみる

次は都道府県のプルダウンプログラム

都道府県の場合は配列を作って回していけば出来ますね。一応わかりやすいようにオブジェクトにしてキーを入れて回します。

pref.js

// Generated by CoffeeScript 1.10.0
(function() {
  'use strict';

  /*
     都道府県のオブジェクト(キー:値)を変数prefに格納
   */
  var pref, prefLoop;
  pref = {
    "1": "北海道",
    "2": "青森県",
    "3": "岩手県",
    "4": "宮城県",
    "5": "秋田県",
    "6": "山形県",
    "7": "福島県",
    "8": "茨城県",
    "9": "栃木県",
    "10": "群馬県",
    "11": "埼玉県",
    "12": "千葉県",
    "13": "東京都",
    "14": "神奈川県",
    "15": "新潟県",
    "16": "富山県",
    "17": "石川県",
    "18": "福井県",
    "19": "山梨県",
    "20": "長野県",
    "21": "岐阜県",
    "22": "静岡県",
    "23": "愛知県",
    "24": "三重県",
    "25": "滋賀県",
    "26": "京都府",
    "27": "大阪府",
    "28": "兵庫県",
    "29": "奈良県",
    "30": "和歌山県",
    "31": "鳥取県",
    "32": "島根県",
    "33": "岡山県",
    "34": "広島県",
    "35": "山口県",
    "36": "徳島県",
    "37": "香川県",
    "38": "愛媛県",
    "39": "高知県",
    "40": "福岡県",
    "41": "佐賀県",
    "42": "長崎県",
    "43": "熊本県",
    "44": "大分県",
    "45": "宮崎県",
    "46": "鹿児島県",
    "47": "沖縄県"
  };

  /*
    ループ処理(配列、表示id名、デフォルト都道府県キー)
   */
  prefLoop = function(pref, id, def_id) {
    var key, opt, value;
    opt = null;
    for (key in pref) {
      value = pref[key];
      if (key === def_id) {
        opt += "<option value='" + value + "' selected>" + value + "</option>";
      } else {
        opt += "<option value='" + value + "'>" + value + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };

  /*
    関数設定(都道府県配列[必須]、表示id名[必須]、デフォルト都道府県キー[必須])
   */
  prefLoop(pref, 'id_pref', '31');
})();

年月日と違うところはあらかじめ配列を作って回すところですね。 pref変数の中に都道府県をいれてfor..in..で回して表示させます。

下記は全文です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>都道府県表示の練習</title>
</head>
<body>
<select name="pref" id="id_pref">
</select>
<script>
// Generated by CoffeeScript 1.10.0
(function() {
  'use strict';

  /*
     都道府県のオブジェクト(キー:値)を変数prefに格納
   */
  var pref, prefLoop;
  pref = {
    "1": "北海道",
    "2": "青森県",
    "3": "岩手県",
    "4": "宮城県",
    "5": "秋田県",
    "6": "山形県",
    "7": "福島県",
    "8": "茨城県",
    "9": "栃木県",
    "10": "群馬県",
    "11": "埼玉県",
    "12": "千葉県",
    "13": "東京都",
    "14": "神奈川県",
    "15": "新潟県",
    "16": "富山県",
    "17": "石川県",
    "18": "福井県",
    "19": "山梨県",
    "20": "長野県",
    "21": "岐阜県",
    "22": "静岡県",
    "23": "愛知県",
    "24": "三重県",
    "25": "滋賀県",
    "26": "京都府",
    "27": "大阪府",
    "28": "兵庫県",
    "29": "奈良県",
    "30": "和歌山県",
    "31": "鳥取県",
    "32": "島根県",
    "33": "岡山県",
    "34": "広島県",
    "35": "山口県",
    "36": "徳島県",
    "37": "香川県",
    "38": "愛媛県",
    "39": "高知県",
    "40": "福岡県",
    "41": "佐賀県",
    "42": "長崎県",
    "43": "熊本県",
    "44": "大分県",
    "45": "宮崎県",
    "46": "鹿児島県",
    "47": "沖縄県"
  };

  /*
    ループ処理(配列、表示id名、デフォルト都道府県キー)
   */
  prefLoop = function(pref, id, def_id) {
    var key, opt, value;
    opt = null;
    for (key in pref) {
      value = pref[key];
      if (key === def_id) {
        opt += "<option value='" + value + "' selected>" + value + "</option>";
      } else {
        opt += "<option value='" + value + "'>" + value + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };

  /*
    関数設定(都道府県配列[必須]、表示id名[必須]、デフォルト都道府県キー[必須])
   */
  prefLoop(pref, 'id_pref', '31');
})();

</script>
</body>
</html>

⇒デモを見てみる

下記ダウンロードして確認も出来ます。

ダウンロード

追記

jQueryのプラグイン化しました、こっちの方が使いやすいです。 select文の中にdata属性で指定することでオプション代わりになります。

data-choice="year" // year, month, dayのいずれかを使用

例としてyearにします。html側としては下記のようにします。

<select name="year" id="id_year" data-choice="year">
</select>

</body>の上に下記のようにスクリプトを読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/path/to/jquery.ymdpulldown.js"></script>
<script>
$(function() {
  $("#id_year").ymdpulldown({
                startyear:2000,
              });
});
</script>

このオプションはdata-startyear=”2000”のようにhtml側に記述しても同じ事になります。これで2000〜2016までのオプション要素が指定IDに表示されます。

<select name="month" id="id_month" data-choice="month">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/path/to/jquery.ymdpulldown.js"></script>
<script>
$(function() {
  $("#id_month").ymdpulldown();
});
</script>

data-choiceがmonthやdayの場合はオプションを書かなくても表示されます。

さらに年月日以外でも使えるようにしてあります。 オプションでstart:’100’,end:’200’,select:’150’の用にするかdata属性でdata-start=”100” data-end=”200” data-select=”150”のように指定するとその値が表示されます。 startは最初の数字、endは最後の数字、selectはデフォルトで表示している数字になります。

<select name="other" id="id_other" data-start="100" data-end="200" data-select="150">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/path/to/jquery.ymdpulldown.js"></script>
<script>
$(function() {
  $("#id_other").ymdpulldown();
});
</script>

上記のように指定すれば100〜200までが表示され150が選択されている状態になります。スクリプト側にも指定できます。

<script>
$(function() {
  $("#id_other").ymdpulldown({
    start:'100',
    end:'200',
    select:'150'
  });
});
</script>

下記からダウンロードしてお使いください。

jquery.ymdpulldown.jsのダウンロード

参考になれば幸いです


∞Tadashi Suyama∞

js year month day html pulldown 日付 プルダウン
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ