Javascriptで日付選択フォームを作成する方法をソースコード付きでまとめました。
## 日付選択フォームの作成
Javascriptで日付選択フォームを作成します。
– | 関連記事 |
---|---|
1 | 【Javascript】年・月・日から曜日を取得 |
2 | 【Javascript】selectタグの選択で別のselectタグのメニュー項目を変更 |
## サンプルコード
サンプルプログラムのソースコードです。
Javascript
js/main.js
function initSelect(){ var select1 = document.forms.formName.select1; var select2 = document.forms.formName.select2; select2.options.length = 0; if (select1.options[select1.selectedIndex].value == "1") { select2.options[0] = new Option("1-1"); select2.options[1] = new Option("1-2"); select2.options[2] = new Option("1-3"); }else if (select1.options[select1.selectedIndex].value == "2") { select2.options[0] = new Option("2-1"); select2.options[1] = new Option("2-2"); select2.options[2] = new Option("2-3"); }else if (select1.options[select1.selectedIndex].value == "3") { select2.options[0] = new Option("3-1"); select2.options[1] = new Option("3-2"); select2.options[2] = new Option("3-3"); } }; window.onload = function() { var select1 = document.forms.formName.select1; select1.options[0] = new Option("1"); select1.options[1] = new Option("2"); select1.options[2] = new Option("3"); document.getElementById("select1").onclick = function() { initSelect(); }; };
HTML
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TEST</title> <pre title="http://code.jquery.com/jquery-1.11.1.js"></pre> <pre title="js/main.js"></pre> </head> <body> <form name="formName" method="post" action="./pathToProgramFile"> <!-- 選択肢1--> <select name = "select1" id="select1"> </select> <!-- 選択肢2(選択肢1で選んだ項目で変化)--> <select name = "select2"> </select> </body> </html>
– | 関連ページ |
---|---|
1 | ■【Vue.js入門】使い方・サンプル集 |
2 | ■Javascript入門 サンプル集 |
3 | ■Node.js入門 |
コメント