|
階層型のセレクタって無いもんかなぁと思っていたところ、
やっぱりないんで自作してみました。
HTMLだけじゃどうにもならないんで、
JavaScriptでごにょごにょやってます。
上位から各セレクタを選んでゆくと、
下位のセレクタが更新されます。
全体のジャンルを表示しているジャンルセレクタで、
過去に選択したジャンルの履歴をたどれます。
各レコードは、value（コード番号）,
text（レコードの説明）,lower（下位コード）のデータを持っています。
各レコードの階層は、コード番号の桁数（各レベル２桁）で識別しています。
lowerの下位コードをうまいこと設定すれば、
全然違うカテゴリーへのリンクを張ることができます。
例えば、「ファッション/スイムウエア」→
「車・スポーツ・アウトドア/マリンスポーツ/スイムウエア」
にジャンプします。
HTML Code
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript"><!--
jsver=1.0;
ie=(navigator.appName=='Microsoft Internet Explorer');
// --></script>
<script language="JavaScript1.1"><!--
jsver=1.1;
if(ie && navigator.appVersion.substring(0,3)<4.0) jsver=1.0;
// --></script>
<script language="JavaScript" src="catecode.js"></script>
</head>
<body onLoad="init()">
<TABLE>
<TBODY>
<tr>
<td>
<form name="f">
<table>
<tr>
<td align="right" valign="top"><small>セレクタ</small></td>
<td><select name="s1"
onChange="changeOpt(this.options[this.selectedIndex].value)">
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
</select><br>
┗
<select name="s2"
onChange="changeOpt(this.options[this.selectedIndex].value)">
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
</select><br>
┗
<select name="s3"
onChange="changeOpt(this.options[this.selectedIndex].value)">
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
</select><br>
┗
<select name="s4"
onChange="changeOpt(this.options[this.selectedIndex].value)">
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
</select><br>
┗
<select name="s5"
onChange="changeOpt(this.options[this.selectedIndex].value)">
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
</select><br>
</td>
</tr>
<tr>
<td align="right"><small>ジャンル</small></td>
<td><select name="sall"
onChange="changeOpt(this.options[this.selectedIndex].value)">
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
<option value="">--------------------
</select><br>
</td>
</tr>
<tr>
<td align="right"><small>コード</small></td>
<td><input type="text" name="v" value="" size=15
onFocus="this.blur()"></td>
</tr>
</table>
</form>
</TBODY>
</TABLE>
</BODY></HTML> |
|
|---|
JavaScript本体のコードは下からダウンロードしてください。
ここでは、楽天の商品カテゴリーを参考にしてますが、
実用的にはサイトマップなんかに使えるんじゃないでしょうか。
|