この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

絞り込み選択リスト


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追記

仕様を大幅に修正しました。できることが増えた代わりに、データ構造が変更になりました。
従って最新版では、上記のように使えません。

詳しくは最新版のドキュメントをご覧下さい。