ja

Question

oooooooooooooooooooooooooooooooooooooooooooo

Answer 1

onChange="selectDay(<% bean.getYear(),bean.getMonth(),bean.getDay() %>)"

の部分で、JavaScriptに対して、JSPから値を正しく出力できてないのでは。

<%= %> で値を出力するか、ELを使って個別に出力すれば実現できるでしょう。

onChange="selectDay(<%= bean.getYear() %>,<%= bean.getMonth() %>,<%= bean.getDay() %>)"

しかしJSPの式で3つ書くのはややタイヘンですね。<%= bean.getYear() %> は ${bean.year} と書けますのでELを使った書き方も検討されるのも良いでしょう。

JSP内で記載されるJavaScriptは JSPから出力された後にブラウザが実行する 前提を忘れなければ、処理順や書き方のヒントになりますね。

Comments

[noririn]

A-pZ様

ご回答ありがとうございます。

すみません、自分の記述ミスで、元々のコードには
onChange="selectDay(<%= bean.getYear() %>,<%= bean.getMonth() %>,<%= bean.getDay() %>)"
と書いておりました。

まだEL式を学ぶ以前の問題のレベルなので＾＾；基本？をしっかりしてからEL式を学んでいきたいと思います。

＞JSP内で記載されるJavaScriptは JSPから出力された後にブラウザが実行する 前提を忘れなければ、処理順や書き方のヒントになりますね。

理解力が乏しく申し訳ないです
selectDay()には引数を入れてもjavascriptではyearから処理が始まっているので
selectDayに引数をおさめてもyearやmonthの設定はできないという考えでいいのでしょうか・・？

[A-pZ]

selectDayにJSPからの値が入っているようなので、もちろんJavaScriptの処理に問題ありません。d(・ω・

[noririn]

A-pZ様

ご回答ありがとうございます。

引数で渡してもjavascriptでどうしても認識されず・・

jsp側で<%= bean.get○○() %>以外にも2015,05,12等入れてみてもjavascript側へ行ってくれませんでした。

何を間違っているのか調査中ですが、大まかなやり方は合っていると信じて頑張ります。

本当にありがとうございました。

[A-pZ]

selectDay(<% bean.getYear(),bean.getMonth(),bean.getDay() %>) は引数3つを指定していますが、JavaScriot側のコードでは、function selectDay() になっています。

selectYear(<% bean.getYear(),bean.getMonth(),bean.getDay() %>) が正しいでしょうか。

Answer 2

JSPはよくわかりませんが、JavaScript部分が動かない書き方だったので、書き直してみました。
下記の2012のところを var inputyear = <%= bean.getYear() %>; みたいにすれば望まれる挙動になるのではないかと思います。

動くサンプル：https://jsfiddle.net/hyun6d02/

<form method="post" action="servlet" name="form" id="form">
	<select name="year"  id="year"  onChange="selectMonth()"></select>年
	<select name="month" id="month" onChange="selectDay()"  ></select>月
	<select name="day"   id="day"></select>日
</form>

window.onload = function() {
	var inputyear = 2012;	// <%= bean.getYear() %>
	var inputmonth = 7;	// <%= bean.getMonth() %>
	var inputday = 8;	// <%= bean.getDay() %>
	selectYear( inputyear, inputmonth, inputday );
};
function filter_int( num, sub ) {
	num = parseInt( num, 10 );
	return ( !isNaN( num ) ) ? num : ( ( sub ) ? filter_int( sub ) : null );
}
function selectYear( inputyear, inputmonth, inputday ) {
	inputyear  = filter_int( inputyear );
	inputmonth = filter_int( inputmonth, document.getElementById( 'month' ).value );
	inputday   = filter_int( inputday,   document.getElementById( 'day'   ).value );

	//今年を取得
	var nowYear = ( new Date() ).getFullYear();

	//yearオブジェクトの取得
	var objY = document.getElementById( 'year' );

	//年を表示（今年からマイナス１０年前まで）
	for ( var i = 0; i <= 10 ; i++ ) {
		objY.options[ i ] = new Option( nowYear - i, nowYear - i, ( nowYear - i === inputyear ) );
	}

	selectMonth( inputmonth, inputday );
}

function selectMonth( inputmonth, inputday  ) {
	inputmonth = filter_int( inputmonth, document.getElementById( 'month' ).value );
	inputday   = filter_int( inputday, document.getElementById( 'day' ).value );

	//monthオブジェクトを取得
	var objM = document.getElementById( 'month' );

	//monthオブジェクトに月optionを追加
	for ( var i = 0; i <= 11; i++ ) {
		objM.options[ i ] = new Option( i + 1, i + 1, ( i + 1 === inputmonth ) );
	}

	selectDay( inputday );
}

//日の要素を作成
function selectDay( inputday  ) {
	inputday = filter_int( inputday, document.getElementById( 'day' ).value );

	//年と月を取得
	var sYear  = filter_int( document.getElementById( 'year'  ).value );
	var sMonth = filter_int( document.getElementById( 'month' ).value );

	//月の最終日：閏年用
	var last;

	//閏年判定
	if ( 2 == sMonth && ( sYear % 400 === 0 || ( sYear % 4 === 0 && sYear % 100 !== 0 ) ) ) {
		last = 29;
	} else {
		last = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ][ sMonth - 1 ];
	}

	//要素の初期化
	var objD = document.getElementById( 'day' );
	objD.length = 0;

	//選択した月に応じた日の要素を追加
	for ( var i = 0; i <last; i++ ) {
		objD.options[ i ] = new Option( i + 1, i + 1, ( i + 1 === inputday ) );
	}
}

Comments

[noririn]

kei344様

ご回答ありがとうございます。

またコードまで書いて頂き大変恐縮です。

いろいろとまだ分かっていないことが多く、知識を増やしていけたらと思っております。
kei344様のコードの中で
!isNaN( num ) ) ? num : ( ( sub ) ? filter_int( sub ) : null

こちらはどういった処理になるのでしょうか・・？ajaxというものでしょうか・・？
isNaN() 関数は引数が NaN （非数）かどうかを判定します、ということは調べたのですが初めて見る書き方で、「？」がどういう意味なのかも分からず＾＾；

ご質問ばかりで申し訳ありません。

ご教示頂けたら幸いです。

[kei344]

書きミスしていたので修正しました。
× parseInt( num, 0 );
○ parseInt( num, 10 );

コメントも無く変わった書き方をしてしまい申し訳ないです。
filter_int関数は
・入力値を数値にする
・引数1が数値でないとき、引数2にfilter_int関数を適用する
・引数2も数値でないとき、nullを返す
という処理になります。

parseIntはNaNか数値を返すため、
# if ( !isNaN( num ) ) { // 数値のとき
# return num;
# } else { // NaN（数値じゃない）とき
# if ( sub ) { // 引数2があるとき
# return filter_int( sub ); // 引数2にfilter_intをかけてその結果を返す
# } else { // 引数2がないとき
# return null ; // 今考えたらNaNを返すほうがいい気がしてきた。
# }
# }
という処理を3項演算子で書いてあります。

【条件 (三項) 演算子 (?:) (JavaScript)】
https://msdn.microsoft.com/ja-jp/library/be21c7hw(v=vs.94).aspx

[noririn]

kei344様

御礼が大変遅くなり本当に申し訳ありません！！
失礼致しました。

ご丁寧に解説をして頂き本当にありがとうございました。理解力や知識の不足を切実に実感しております。

おかげさまでjavascriptが動きました。

この度は本当にありがとうございました。