| JavaScript 動的にプルダウンを変更する（日付変更） | 2008-08-19 |
 | 夢をかなえる人の不思議の手帳 バージョン2.0<日付記入式> (2006/02/17) 藤沢 優月 商品詳細を見る |
あぁ、忙しい1週間だった。。。
ブログの更新すらまともに出来なかったわ。
来週以降も忙しそう。。。
もっとのんびりが好きなのになぁ。
さて、少し前にアップだけしておいた記事に追記です。
追記部分は、ソースの解析部分。
今回やろうとした事は、プルダウンで日付を選択させ、javascriptの機能を用いて、その月にあった日付（値）を持ったプルダウンを動的に生成するといった内容です。
・・・説明が長い。
要するに、プルダウンの値によって、異なるプルダウンが動的に生成されるといった具合です。
見た方が早いかも。
→フォームの値を継承させる （独学道場）
では、ソースです。
まずは、htmlファイルから。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript" src="../js/js_library.js"></script>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<TITLE></TITLE>
</HEAD>
<BODY>
<p id="message" name="message">
日付を選び、表示を押すと、フォームの下に日付が表示されます。
</p>
<form>
<select id="year" name="year" onChange="setDay();">
<script language="JavaScript"><!--
CreateYears();
// --></script>
</select>
<select id="month" name="month" onChange="setDay();">
<script language="JavaScript"><!--
CreateMonths();
// --></script>
</select>
<select id="day" name="day" onChange="setDay();">
<script language="JavaScript"><!--
CreateDays();
// --></script>
</select>
<input type="button" id="show" name="show" value="表示" onClick="showDate();">
</form>
<br>
<p id="selectDate" name="selectDate"></p>
</BODY>
</HTML>
外部にJS関数用のファイルを作成し、それを読み込んでいます。
この方がスッキリして、私は好きです。
HTMLはご覧になって分かるように、プルダウンを生成しているだけ。
表示を押したら、「pタグ」のところに選択した日付が出るようにします。
JSでDOMを利用するので、タグには「id」を付与してあります。
こうする事で、それぞれにそれぞれの処理をする事が出来ます。
便利です。
タグの中に、直接JSが記述してあります。
・onChange ・・・ タグの状態が変化したら処理をする
「onClick」は、以前やったのでそちらを参考にして下さい。
参考 → JavaScript onclickの使い方
さて、それでは次にJS関数です。
長いですので、ご注意下さい。
/**
*
* @add 2008.08.24 showDate() ボタン押時に日付を表示する関数
* @add 2008.08.24 february( 年, 月 ) 2月の日付決定関数
* @add 2008.08.24 setDay() プルダウン内日付変更関数
* @add 2008.08.24 CreateDays() 日プルダウン作成関数
* @add 2008.08.24 CreateMonths() 月プルダウン作成関数
* @add 2008.08.24 CreateYears() 西暦プルダウン作成関数
* @create 2008.08.24 JS関数ライブラリ作成
*
*/
/*
*
* @add 2008.08.24 CreateYears() 西暦プルダウン作成関数
*
*/
function CreateYears() {
var i;
date = new Date();
var nowYear = date.getYear() + 1900;
var year = nowYear;
var optionTag;
for( i = 0; i < 20; i++ ) {
if( year == nowYear ) {
optionTag = "<option value=\"" + year + "\" selected>" + year + "</option>\n";
} else {
optionTag = "<option value=\"" + year + "\">" + year + "</option>\n";
}
year++;
document.write( optionTag );
}
}
/*
*
* @add 2008.08.24 CreateMonths() 月プルダウン作成関数
*
*/
function CreateMonths() {
var i;
date = new Date();
var nowMonth = date.getMonth() + 1;
var optionTag;
for( i = 1; i <= 12; i++ ) {
if( i == nowMonth ) {
optionTag = "<option value=\"" + i + "\" selected>" + i + "</option>\n";
} else {
optionTag = "<option value=\"" + i + "\">" + i + "</option>\n";
}
document.write( optionTag );
}
}
/*
*
* @add 2008.08.24 CreateDays() 日プルダウン作成関数
*
*/
function CreateDays() {
var i;
date = new Date();
var nowDay = date.getDate();
var optionTag;
for( i = 1; i <= 31; i++ ) {
if( i == nowDay ) {
optionTag = "<option value=\"" + i + "\" selected>" + i + "</option>\n";
} else {
optionTag = "<option value=\"" + i + "\">" + i + "</option>\n";
}
document.write( optionTag );
}
}
/*
*
* @add 2008.08.24 setDay() プルダウン内日付変更関数
*
*/
function setDay(){
var year = document.getElementById( "year" ).value;
var month = document.getElementById( "month" ).value;
var day = document.getElementById( "day" );
var lastday = february( year, month );
var itemnum = day.length;
if ( lastday - 1 < day.selectedIndex ) {
day.selectedIndex = lastday - 1;
}
day.length = lastday;
for ( cnt = ( itemnum + 1 ); cnt <= lastday; cnt++ ) {
day.options[cnt - 1].text = cnt;
}
}
/*
*
* @add 2008.08.24 february( 年, 月 ) 2月の日付決定関数
*
*/
function february( year, month ){
var lastday = new Array( 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 );
if ( ( (year % 4 == 0) && (year % 100 != 0) ) || ( year % 400 == 0 ) ) {
lastday[1] = 29;
}
return lastday[month - 1];
}
/**
*
* @add 2008.08.24 showDate() ボタン押時に日付を表示する関数
*
*/
function showDate() {
var year = document.getElementById( "year" ).value;
var month = document.getElementById( "month" ).value;
var day = document.getElementById( "day" ).value;
var show = "あなたが選択したのは、" + year + "年" + month + "月" + day + "日です。";
var selectDate = document.getElementById( "selectDate" );
selectDate.innerHTML = show;
return false;
}
ファイル自体は長いけど、各関数はそれほど長くないかと。
それに、やってる事も、目を通して貰えれば、大体はつかめるかと。
上から3つは、プルダウンの生成です。
何かゴチャゴチャなってますが。。。
ようは、今日の日付を初期値にしたプルダウンの生成です。
値を全て手入力するのは、非効率的なので、「for」を利用している訳です。
その次の2つで、動的なプルダウンを実現しています。
年または月の値によって、選択できる日が変化します。
（例えば、1月は31日まであるが、2月は28日または29日）
簡単に言ってしまえば、値を「getElementById().value」で取得して、その値を参照して、2月の日付を決める。
これだけ。
何も難しいことはやっていない。
最後のは、ボタンが押された時の処理。
「innerHTML」を使って「pタグ」の中にテキストを挿入、表示させている。
なお、「return false;」としてあげる事で、フォームが更新されずに値だけを変更させる事が出来る。
「location.href」などで、URL指定して・・・などとしなくてイイので、とっても便利だ。
（ただし、「input type="button"」でのみ機能するので、そのあたりは工夫が必要か）
今回は、こんな感じで。
メモ。
追記部分は、ソースの解析部分。
今回やろうとした事は、プルダウンで日付を選択させ、javascriptの機能を用いて、その月にあった日付（値）を持ったプルダウンを動的に生成するといった内容です。
・・・説明が長い。
要するに、プルダウンの値によって、異なるプルダウンが動的に生成されるといった具合です。
見た方が早いかも。
→フォームの値を継承させる （独学道場）
では、ソースです。
まずは、htmlファイルから。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript" src="../js/js_library.js"></script>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<TITLE></TITLE>
</HEAD>
<BODY>
<p id="message" name="message">
日付を選び、表示を押すと、フォームの下に日付が表示されます。
</p>
<form>
<select id="year" name="year" onChange="setDay();">
<script language="JavaScript"><!--
CreateYears();
// --></script>
</select>
<select id="month" name="month" onChange="setDay();">
<script language="JavaScript"><!--
CreateMonths();
// --></script>
</select>
<select id="day" name="day" onChange="setDay();">
<script language="JavaScript"><!--
CreateDays();
// --></script>
</select>
<input type="button" id="show" name="show" value="表示" onClick="showDate();">
</form>
<br>
<p id="selectDate" name="selectDate"></p>
</BODY>
</HTML>
外部にJS関数用のファイルを作成し、それを読み込んでいます。
この方がスッキリして、私は好きです。
HTMLはご覧になって分かるように、プルダウンを生成しているだけ。
表示を押したら、「pタグ」のところに選択した日付が出るようにします。
JSでDOMを利用するので、タグには「id」を付与してあります。
こうする事で、それぞれにそれぞれの処理をする事が出来ます。
便利です。
タグの中に、直接JSが記述してあります。
・onChange ・・・ タグの状態が変化したら処理をする
「onClick」は、以前やったのでそちらを参考にして下さい。
参考 → JavaScript onclickの使い方
さて、それでは次にJS関数です。
長いですので、ご注意下さい。
/**
*
* @add 2008.08.24 showDate() ボタン押時に日付を表示する関数
* @add 2008.08.24 february( 年, 月 ) 2月の日付決定関数
* @add 2008.08.24 setDay() プルダウン内日付変更関数
* @add 2008.08.24 CreateDays() 日プルダウン作成関数
* @add 2008.08.24 CreateMonths() 月プルダウン作成関数
* @add 2008.08.24 CreateYears() 西暦プルダウン作成関数
* @create 2008.08.24 JS関数ライブラリ作成
*
*/
/*
*
* @add 2008.08.24 CreateYears() 西暦プルダウン作成関数
*
*/
function CreateYears() {
var i;
date = new Date();
var nowYear = date.getYear() + 1900;
var year = nowYear;
var optionTag;
for( i = 0; i < 20; i++ ) {
if( year == nowYear ) {
optionTag = "<option value=\"" + year + "\" selected>" + year + "</option>\n";
} else {
optionTag = "<option value=\"" + year + "\">" + year + "</option>\n";
}
year++;
document.write( optionTag );
}
}
/*
*
* @add 2008.08.24 CreateMonths() 月プルダウン作成関数
*
*/
function CreateMonths() {
var i;
date = new Date();
var nowMonth = date.getMonth() + 1;
var optionTag;
for( i = 1; i <= 12; i++ ) {
if( i == nowMonth ) {
optionTag = "<option value=\"" + i + "\" selected>" + i + "</option>\n";
} else {
optionTag = "<option value=\"" + i + "\">" + i + "</option>\n";
}
document.write( optionTag );
}
}
/*
*
* @add 2008.08.24 CreateDays() 日プルダウン作成関数
*
*/
function CreateDays() {
var i;
date = new Date();
var nowDay = date.getDate();
var optionTag;
for( i = 1; i <= 31; i++ ) {
if( i == nowDay ) {
optionTag = "<option value=\"" + i + "\" selected>" + i + "</option>\n";
} else {
optionTag = "<option value=\"" + i + "\">" + i + "</option>\n";
}
document.write( optionTag );
}
}
/*
*
* @add 2008.08.24 setDay() プルダウン内日付変更関数
*
*/
function setDay(){
var year = document.getElementById( "year" ).value;
var month = document.getElementById( "month" ).value;
var day = document.getElementById( "day" );
var lastday = february( year, month );
var itemnum = day.length;
if ( lastday - 1 < day.selectedIndex ) {
day.selectedIndex = lastday - 1;
}
day.length = lastday;
for ( cnt = ( itemnum + 1 ); cnt <= lastday; cnt++ ) {
day.options[cnt - 1].text = cnt;
}
}
/*
*
* @add 2008.08.24 february( 年, 月 ) 2月の日付決定関数
*
*/
function february( year, month ){
var lastday = new Array( 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 );
if ( ( (year % 4 == 0) && (year % 100 != 0) ) || ( year % 400 == 0 ) ) {
lastday[1] = 29;
}
return lastday[month - 1];
}
/**
*
* @add 2008.08.24 showDate() ボタン押時に日付を表示する関数
*
*/
function showDate() {
var year = document.getElementById( "year" ).value;
var month = document.getElementById( "month" ).value;
var day = document.getElementById( "day" ).value;
var show = "あなたが選択したのは、" + year + "年" + month + "月" + day + "日です。";
var selectDate = document.getElementById( "selectDate" );
selectDate.innerHTML = show;
return false;
}
ファイル自体は長いけど、各関数はそれほど長くないかと。
それに、やってる事も、目を通して貰えれば、大体はつかめるかと。
上から3つは、プルダウンの生成です。
何かゴチャゴチャなってますが。。。
ようは、今日の日付を初期値にしたプルダウンの生成です。
値を全て手入力するのは、非効率的なので、「for」を利用している訳です。
その次の2つで、動的なプルダウンを実現しています。
年または月の値によって、選択できる日が変化します。
（例えば、1月は31日まであるが、2月は28日または29日）
簡単に言ってしまえば、値を「getElementById().value」で取得して、その値を参照して、2月の日付を決める。
これだけ。
何も難しいことはやっていない。
最後のは、ボタンが押された時の処理。
「innerHTML」を使って「pタグ」の中にテキストを挿入、表示させている。
なお、「return false;」としてあげる事で、フォームが更新されずに値だけを変更させる事が出来る。
「location.href」などで、URL指定して・・・などとしなくてイイので、とっても便利だ。
（ただし、「input type="button"」でのみ機能するので、そのあたりは工夫が必要か）
今回は、こんな感じで。
メモ。