データ検索サンプル(1) （IE4.0以降）
原案：平井 公大 氏 （2001/02/25 登録）
表の中のデータを選択ボックスで絞り込むサンプル1です。このサンプルはデータをJavaScirptの配列に用意しておいて、レイヤの中に直接書き込み、選択ボックスの選択項目もその配列から得ています。IE4.0以降で動作します。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>データ検索サンプル(1)</title>
<script type="text/javascript">
<!--
var data = new Array(20);
var list = new Array(20);
data[0] = "根菜類,だいこん,200";
data[1] = "果実類,みかん,100";
data[2] = "魚介類,ハマグリ,200";
data[3] = "根菜類,にんじん,100";
data[4] = "果実類,りんご,100";
data[5] = "魚介類,ハマチ,400";
data[6] = "野菜類,はくさい,200";
data[7] = "果実類,イチゴ,200";
data[8] = "魚介類,タイ,400";
data[9] = "野菜類,キャベツ,100";
data[10] = "魚介類,マグロ,300";
data[11] = "魚介類,アサリ,100";
data[12] = "野菜類,レタス,300";
data[13] = "果実類,バナナ,100";
data[14] = "魚介類,イワシ,200";
data[15] = "根菜類,サトイモ,100";
data[16] = "魚介類,メザシ,100";
data[17] = "根菜類,ごぼう,100";
data[18] = "果実類,レモン,200"
data[19] = "野菜類,ネギ,100";
data[20] = "魚介類,サザエ,100";
for (i=0;i<data.length;i++) list[i] = data[i].split(',');
function listchk( s, str ) {
for ( k=0; k < s.length; k++ ) {
if ( s[k].text == str ) return false;
}
return true;
}
function wrtttl( s, p ) {
var n = 0;
for ( i=0; i < data.length; i++ ) {
if( listchk( s, list[i][p] ) ) {
n++;
s.length++;
if ( navigator.appName == 'Netscape' ) s.size += 1;
s[n].text = list[i][p];
s[n].value = s[n].text;
}
}
}
function showlist(str) {
var head = '<table border="1" width="300" cellspacing="0" cellpadding="4">';
var foot = '</table>';
if( document.getElementById ) {
document.getElementById('L2').innerHTML = head + str + foot;
} else if ( document.layers ) {
document.layers['L2'].document.open();
document.layers['L2'].document.write(head + str + foot);
document.layers['L2'].document.close();
}
}
function wrtlst() {
var s = "";
for ( i=0; i < list.length; i++ ) {
s += '<tr>';
for ( w=0; w < list[i].length; w++ ) {
s += '<td width="100">' + list[i][w] + '</td>';
}
s += '</tr>';
}
showlist(s);
}
function seach( arg, n ) {
var s = "";
if (n!=0) document.frm1.kind.selectedIndex = 0;
if (n!=1) document.frm1.name.selectedIndex = 0;
if (n!=2) document.frm1.pric.selectedIndex = 0;
for ( i=0; i < list.length; i++ ) {
if ( arg == list[i][n] ) {
s += '<tr>';
for ( w=0; w < list[i].length; w++ ) {
s += '<td width="100">' + list[i][w] + '</td>';
}
s += '</tr>';
}
}
if(s) showlist(s); else wrtlst();
}
function init() {
wrtttl( document.frm1.kind.options , 0 );
wrtttl( document.frm1.name.options , 1 );
wrtttl( document.frm1.pric.options , 2 );
wrtlst();
}
// -->
</script>
</head>
<body>
<div style="text-align:center;">
<div id="L1" style="margin:0em;">
<form name="frm1" style="margin-bottom:0em;">
<table border="1" width="300" cellspacing="0" cellpadding="3">
<tr>
<td width="100" align="center">
<select name="kind" style="width:90;" onChange="seach(this[this.selectedIndex].value, 0 )">
<option selected value="種 別">種 別</option>
</select>
</td>
<td width="100" align="center">
<select name="name" style="width:90;" onChange="seach(this[this.selectedIndex].value, 1 )">
<option selected value="品 名">品 名</option>
</select>
</td>
<td width="100" align="center">
<select name="pric" style="width:90;" onChange="seach(this[this.selectedIndex].value, 2 )">
<option selected value="価 格">価 格</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div id="L2" style="position:relative; margin:0em;"></div>
</div>
</body>
</html>
