Javascriptで、絞り込み選択リストを作りました。
選択した値に連動して、次のリストの値が動的に変化するというヤツです。
IE7、IE8、FF3.0、FF3.5で動作確認済み。
(ただしソースはかなりアレです。もっと勉強しないと…)
使い方は次の通りです。
<html> <head> <script src="./NarrowDownSelectionList.js"></script> </head> <body> <div id="sample"></div> </body> <script> var ndsl = new NarrowDownSelectionList(document); ndsl.setParamName("test"); ndsl.setListItems({ "グループA": { "サブグループA1": { "値A10": "A10", "値A11": "A11", "値A12": "A12" }, "サブグループA2": { "値A20": "A20", "値A21": "A21", "値A22": "A22" } }, "グループB": { "サブグループB1": { "値B10": "B10", "値B11": "B11", "値B12": "B12" }, "サブグループB2": { "値B20": "B20", "値B21": "B21", "値B22": "B22" } } }); // 初期値を復元する場合はこちら // ndsl.setInitialValue("A21"); var select = ndsl.createNarrowDownSelectListElement(); document.getElementById("sample").appendChild(select); </script> </html>
(より詳しい解説はこちら)
r42utils-0.1.2としてリリースしました。
こちらからダウンロードできます。どうぞご自由にお使いください。
(JSファイル直リンクはこちら)
2010-05-01追記
仕様を大幅に修正しました。できることが増えた代わりに、データ構造が変更になりました。
従って最新版では、上記のように使えません。
詳しくは最新版のドキュメントをご覧下さい。
