単一選択のセレクトボックスを連動させたい

概要

単一選択のセレクトボックスが複数個あって連動させる場合、
ajax通信でn個目の選択状況を反映して～といったことはしたくない。

こういうときなんか楽な方法ってないでしょうか。
以下、optgroupというタグとjQueryを使ってサボる方法。

html のoptgroup

存在を忘れていたけどそういえばこんなタグがあった。

話を分かりやすくするために、セレクトボックス2個の親子関係を例にする。
親の選択が子にも影響するって感じ。

<select name="parent">
    <option value="">（指定なし）</option>
    <option value="1">hogehoge.jp</option>
    <option value="2">Yahoo! Japan</option>
    <option value="3">Test</option>
</select>
<select name="child">
    <option value="">（指定なし）</option>
    <optgroup label="hogehoge.jp">
        <option value="1">hogehoge</option>
        <option value="3">fugafuga</option>
    </optgroup>
    <optgroup label="Yahoo! Japan">
        <option value="2">Yahoo! Japan</option>
        <option value="4">ヤフー知恵遅れ</option>
    </optgroup>
    <optgroup label="Test">
    </optgroup>
</select>

jQuery

jQueryで選択状態の反映を実現する。
ソースコードは…まあ参考までということで。

// 親の選択が変更された場合、子の表示を変更しつつ処理する
$("select[name='parent']").change(function() {
    // 子の選択状態を解除
    $("select[name='child'] option:selected").attr("selected", false);
    $("select[name='child']").val([""]);
    // 子を全て非表示で初期化
    $("select[name='child'] > optgroup").each(function() {
        $(this).attr("hidden", "hidden");
    });
    // 親の選択済みをループさせて子を処理する
    $("select[name='parent'] option:selected").each(function() {
        var val = $(this).val();
        var text = $(this).text();
        // ラベルで比較は気持ち悪いね
        if (val != "") {
            // 親の選択状態が（指定なし）以外の場合、子も限定させる
            $("select[name='child'] > optgroup").each(function() {
                if ($(this).attr('label') === text) {
                    // ラベルが親と一緒の場合、hiddenを消すことで見せる
                    $(this).removeAttr("hidden");
                } else {
                    // ラベルが親と違うから、hiddenで消す
                    // 実は上で既にやってるから要らないけど、一応書いておく
                    $(this).attr("hidden", "hidden");
                }
            });
        } else {
            // 親の選択状態が（指定なし）の場合、全部見せる
            $("select[name='child'] > optgroup").each(function() {
                $(this).removeAttr("hidden");
            });
        }
    });
});