(jQuery) select 要素の選択結果で別の select 要素の選択肢を絞り込む jQuery プラグイン "Select Narrowing Plugin"

ある select の選択結果で、別の select の選択肢を絞り込む jQuery プラグインを作りました。
こういうの、「Hierselect」（hierarchy + select, 階層select）っていうらしいです。

ググると同じ目的のライブラリはいくつか見つかるけども、

サーバサイドの言語に依存してたり、階層の数が限定されてたり、単純な階層関係しか定義できなかったり、ちょっと不便。
なので新しく作りました。

このプラグインのウリ↓

サーバサイドの実装なしに、JS と HTML だけで動作します。サーバサイドが PHP だろうが Ruby だろうが Java だろうが関係なく動きます。素敵。
単純な「親→子」だけでなく、「親→子→孫→ひ孫…」と、何階層でも連鎖させられます。国→エリア→都市、とか。
「親→子1＆子2」のように、1つの親 select に複数の子 select を持たせられます。
「親1＆親2→子」のように、複数の親 select の選択結果により子 select の選択肢を絞り込んだり出来ます。例えば select1 で色を、select2 で形をそれぞれ選択して、select3 の選択肢を絞り込んだりとか。
これらを組み合わせて、いくらでも複雑な階層関係を表現出来ます。出来るはず。あまり複雑な階層関係で実験したことないですけど。。。

プラグインの使い方ですが、

HTML をこんな風に書いて、

<!-- 親select：食品カテゴリ -->
<select id="category">
    <option value="">-- Food Category --</option>
    <option value="meat">Meat</option>
    <option value="vegetable">Vegetable</option>
    <option value="fruit">Fruit</option>
</select>
<!-- 子select：食品 -->
<select id="food">
    <option value="">-- Food --</option>
    <option value="beef" data-category="meat">Beef</option>
    <option value="pork" data-category="meat">Pork</option>
    <option value="chicken" data-category="meat">Chicken</option>
    <option value="lettuce" data-category="vegetable">Lettuce</option>
    <option value="carrot" data-category="vegetable">Carrot</option>
    <option value="tomato" data-category="vegetable">Tomato</option>
    <option value="apple" data-category="fruit">Apple</option>
    <option value="banana" data-category="fruit">Banana</option>
    <option value="melon" data-category="fruit">Melon</option>
</select>

jQuery ライブラリをこんな風に呼ぶだけです。

<script type="text/javascript">
$(function () {
    $("#category").narrows("#food");    // #category は #food を絞り込む
});
</script>

親 select でどの option を選択したら子 select でどの option が選択肢になるのか？ていうのは子 select のデータ属性で定義します。上の例でいうと、

    <option value="beef" data-category="meat">Beef</option>

データ属性 data-category="meat" により「id="category" な親 select で value="meat" が選択された場合にこの option を表示」って表現しています。

詳細は github の README に書いたので見てね。

jQuery Select Narrowing Plugin

あとサンプルはこちら。

sample.html

~~あっ。そういえば Windows で動作確認してないです_(:3｣∠)_ ちょっとまっててよん。~~ Windows でも動きました。IE6、結構古めのFirefox（笑。バージョン忘れました）で動作確認。

（追記）いろんな OS のいろんなブラウザにスクリーンショット取って貰えるサービス Browsershots で sample.html のスクリーンショットをまとめて取って、Jasmine のテストが通ってるか（画面下の緑のバーが出ているか）ざっくり眺めて確認しましたが、大体のブラウザで動作してるみたいでした。（画面下まで写ってなくてテスト結果が見えないのはありましたが少なくともテスト失敗を表す赤いバーは1つも見えませんでした。）Jasmine + Browsershots ってすごい便利！

モンモンブログ

技術的な話など

(jQuery) select 要素の選択結果で別の select 要素の選択肢を絞り込む jQuery プラグイン "Select Narrowing Plugin"