リスト連動
リスト連動
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
<title>リスト連動</title>
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/test5.js" type="text/Javascript"></script>
</head>
<body>
<h4>最初のコンボボックスを選択するとサブコンボボックスのリストが変更されます。</h4>
<form id=frm name=frm method="post">
選択：
<select id=type1 name=type1></select><br />
リスト：
<select id=type2 name=type2></select>
<div>
結果：<input type=text id=dispResult />
</div>
</form>
</body>
</html>
<!--
------------------------------------------------------------------------
test5.js
//画面を読み込んだタイミングで無名関数を実行します
window.onload = function ()
{
//クラスをインタンス化します
var objManage = new Manage();
//イベントを設定します
objManage.setEvent();
//上のコンボボックスのインデックスを最初のインデックスに設定する
document.frm.type1.selectedIndex=0;
//下のコンボボックスのインデックスを最初のインデックスに設定する
objMenu.setType2ListMenu(0);
};
//上のコンボボックスのリストに使用するデータを準備する
var arrayType1 =
[
{ key : 'アルファベット' , value : 'data1' },
{ key : '数字' , value : 'data2' }
];
//クラスを作成する
var Manage = Class.create();
Manage.prototype = {
//コンストラクタ
initialize : function()
{
var i = 0;
arrayType1.each
(
function( objType1 )
{
document.frm.type1.options[i++] =
new Option( objType1.key, objType1.value );
}
);
}
,
setEvent : function()
{
//上のコンボボックスのリストが変更されたイベント
Event.observe
(
'type1',
'change',
function()
{
//下のコンボボックスのリストを再作成する
objMenu.setType2ListMenu( document.frm.type1.selectedIndex );
}
);
Event.observe(
'type2',
'change',
function()
{
//コンボボックスのリストを選択した結果をdivに表示させます
objMenu.dispSelectData
(
document.frm.type1.selectedIndex,
document.frm.type2.selectedIndex
);
}
);
}
};
var objMenu =
{
init : function()
{
document.frm.type2.length = 0;
$('dispResult').value = '';
$('dispResult').style.backgroundColor = '#fff';
}
,
//下のコンボボックスのリストを再作成する
setType2ListMenu : function( Type1No ){
this.init();
//jsonファイルからデータを読み込むためファイル名を取得します
var URL2 =
'../data/' + arrayType1[Type1No].value + '.json';
var ajax = new Ajax.Request
(
URL2
,
{
method : 'get'
,
onSuccess : function( httpObject )
{
//上のコンボボックスのリストから選択した状態から判定させ
//下のコンボボックスのリストを再作成する
objMenu.setType2List( httpObject.responseText );
}
,
onFailure: function()
{
alert( 'データの読み込みに失敗しました。' );
}
}
);
}
,
//上のコンボボックスのリストから選択した状態から判定させ
//下のコンボボックスのリストを再作成する
setType2List : function( strData )
{
this.arrayType2 = eval( strData );
var i = 0;
this.arrayType2.each(
function( objType2 )
{
document.frm.type2.options[i++] =
new Option( objType2.key, objType2.value );
}
);
}
,
//コンボボックスのリストを選択した結果をdivに表示させます
dispSelectData : function(Type1No, Type2No )
{
//結果をdivの上のコンボボックスの選択リストの結果と
//下のコンボボックスの選択リストの結果を連結した結果を表示します
$('dispResult').value =
arrayType1[Type1No].key + ' ' + this.arrayType2[Type2No].key;
//フォーカスをあてます
$('dispResult').style.backgroundColor = 'mintcream';
document.frm.dispResult.focus();
}
};
data1.json
[
{ key : '未選択' , value : 00 },
{ key : 'A' , value : 10 },
{ key : 'B' , value : 11 },
{ key : 'C' , value : 12 },
{ key : 'D' , value : 13 },
{ key : 'E' , value : 14 },
{ key : 'F' , value : 15 },
{ key : 'G' , value : 16 },
{ key : 'H' , value : 17 },
{ key : 'I' , value : 18 },
{ key : 'J' , value : 19 },
{ key : 'K' , value : 20 },
{ key : 'L' , value : 21 },
{ key : 'M' , value : 22 },
{ key : 'N' , value : 23 },
{ key : 'O' , value : 24 },
{ key : 'P' , value : 25 },
{ key : 'Q' , value : 26 },
{ key : 'R' , value : 27 },
{ key : 'S' , value : 28 },
{ key : 'T' , value : 29 },
{ key : 'U' , value : 30 },
{ key : 'V' , value : 31 },
{ key : 'W' , value : 32 },
{ key : 'X' , value : 33 },
{ key : 'Y' , value : 34 },
{ key : 'Z' , value : 35 }
]
data2.json
[
{ key : '未選択', value : 00 },
{ key : '0' , value : 10 },
{ key : '1' , value : 11 },
{ key : '2' , value : 12 },
{ key : '3' , value : 13 },
{ key : '4' , value : 14 },
{ key : '5' , value : 15 },
{ key : '6' , value : 16 },
{ key : '7' , value : 17 },
{ key : '8' , value : 18 },
{ key : '9' , value : 19 }
]
------------------------------------------------------------------------
-->
|
|