のみほーだい!

ユーザーが入力した値によってフォーム部品を変化させたいってことよくありますよね？え？ないですか？そうですか・・・。いや、仕事では結構ありますよ。 ということで仕方なしに勉強しましょう。この場合もJavaScriptです。

とりあえず、したのラジオボタンのチェックを変更してみて下さい。

ラジオボタンを変更したときに呼び出されるchangeSelectメソッドが、セレクトボックス部品配列を元にセレクトボックスを生成させています。

<script type="text/javascript">

	// セレクトボックス部品配列
	var selectArray1 = new Array();

		selectArray1[0] = new Array();
		selectArray1[0][0]="CD - 12cm";
		selectArray1[0][1]="cd01";

		selectArray1[1] = new Array();
		selectArray1[1][0]="CD - 8cm";
		selectArray1[1][1]="cd02";

	var selectArray2 = new Array();

		selectArray2[0] = new Array();
		selectArray2[0][0]="レコード - 12inch";
		selectArray2[0][1]="rc01";

		selectArray2[1] = new Array();
		selectArray2[1][0]="レコード - 10inch";
		selectArray2[1][1]="rc02";

		selectArray2[2] = new Array();
		selectArray2[2][0]="レコード - 7inch";
		selectArray2[2][1]="rc03";


	// セレクトボックス生成メソッド
	function changeSelect(flg){
	    var selectLength = 0;
	    var i = 0;
	    var n = -1;

	    if (flg == 0){
	      selectLength = selectArray1.length;
	    }else{
	      selectLength = selectArray2.length;
	    }

	    document.mainForm.formatSelect.options.length = selectLength;

	    for (i = 0; i < selectLength; i++){
	        if (flg == 0){
	            document.mainForm.formatSelect.options[i].text = selectArray1[i][0];
	            document.mainForm.formatSelect.options[i].value = selectArray1[i][1];
	        }else{
	            document.mainForm.formatSelect.options[i].text = selectArray2[i][0];
	            document.mainForm.formatSelect.options[i].value = selectArray2[i][1];
	        }
	    }
	}

	// ウィンドウ初期表示時のセレクトボックス生成
	window.onLoad=changeSelect(0);

</script>

上記のJavaScriptのセレクトボックス部品配列の部分をJSPでstrutsのタグで生成する場合は、結構難しいです。(僕には)　ということで具体例。

例：フォーマット名とフォーマットIDを格納するJavaBeans

public class FormatBean {

	private String formatId;	// フォーマットID (cd01・・、rc01・・)
	private String formatName;	// フォーマット名 (CD-12cm・・、レコード-12inch・・)

        以下、上記フィールドのsetter、getterメソッド

    public void setFormatId(String formatId) {
        this.formatId = formatId;
    }
        ・
        ・
        ・
}

上記のJavaBeansがArrayListに格納され、そのArrayListがリクエスト、セッションまたはコンテキストに「cdList」「rcList」というキー名でセットされている場合、以下のようになります。

//CDフォーマットのリスト
var selectArray1 = new Array();
<logic:iterate id="cdList" name="cdList" indexId="cdListIndex" >
	selectArray1[<bean:write name="cdListIndex" />] = new Array();
	selectArray1[<bean:write name="cdListIndex" />][0]
		="<bean:write name="cdList" property="formatName"/>";
	selectArray1[<bean:write name="cdListIndex" />][1]
		="<bean:write name="cdList" property="formatId"/>";
</logic:iterate>
//レコードフォーマットのリスト
var selectArray2 = new Array();
<logic:iterate id="rcList" name="rcList" indexId="rcListIndex" >
	selectArray2[<bean:write name="rcListIndex" />] = new Array();
	selectArray2[<bean:write name="rcListIndex" />][0]
		="<bean:write name="rcList" property="formatName"/>";
	selectArray2[<bean:write name="rcListIndex" />][1]
		="<bean:write name="rcList" property="formatId"/>";
</logic:iterate>

これで、下記と同じJavaScriptコードが生成されます。

//CDフォーマットのリスト
var selectArray1 = new Array();

	selectArray1[0] = new Array();
	selectArray1[0][0]="CD - 12cm";
	selectArray1[0][1]="cd01";

	selectArray1[1] = new Array();
	selectArray1[1][0]="CD - 8cm";
	selectArray1[1][1]="cd02";

//レコードフォーマットのリスト
var selectArray2 = new Array();

	selectArray2[0] = new Array();
	selectArray2[0][0]="レコード - 12inch";
	selectArray2[0][1]="rc01";

	selectArray2[1] = new Array();
	selectArray2[1][0]="レコード - 10inch";
	selectArray2[1][1]="rc02";

	selectArray2[2] = new Array();
	selectArray2[2][0]="レコード - 7inch";
	selectArray2[2][1]="rc03";

※今回はちょっと難しいですが、またちょっと注意しなければならないことがあります。

ウィンドウ初期表示時のセレクトボックス生成で使用しているwindow.onLoad=changeSelect(0);はJSPの中で セレクトボックスタグの下に記述しないと正常に動作しません。それはブラウザはHTMLを上から解釈していくため、 まだセレクトボックスを解釈していない時点でセレクトボックスのoptionを生成するメソッドの処理が呼ばれても、 セレクトボックスの存在を解釈していないブラウザは、どのセレクトボックスのoptionを生成していいかわからないためです。