カテゴリを階層ごとにselectに出力して連動させる

MTQに「親カテゴリと子カテゴリの連動出力」という質問が上がっていました。
この質問に答えてみます。

1.質問の内容

例えば、以下のような階層のカテゴリがあるとします。

• 関東
  • 東京都
  • 神奈川県
  • 埼玉県
  • 千葉県
• 関西
  • 大阪都
  • 兵庫県
  • 京都府

この時に、親カテゴリと子カテゴリをそれぞれselectに出力し、親カテゴリを1つ目のselectで選択すると、その親に対応する子カテゴリのみを、2つ目のselectで選択できるようにしたいということです。
例えば、1つ目のselectで「関東」を選ぶと、2つ目のselectでは「東京都」「神奈川県」「埼玉県」「千葉県」のみ選択できるようにします。

2.解答

jQueryのChained Selects jQuery Pluginというプラグインを使って、この質問のような動作になるように、テンプレートを組んでみました。
なお、jQueryとChained Selects jQuery Pluginは、ページにすでに組み込んであるものとします。

<mt:SetVar name="depth" value="0">
<mt:TopLevelCategories>
  <$mt:SetVar name="parent_id" value="0"$>
  <mt:ParentCategory><$mt:CategoryId setvar="parent_id"$></mt:ParentCategory>
  <mt:SetVarBlock name="options" index="$depth" append="1">
    <option value="cat_<$mt:CategoryID$>" class="cat_<$mt:GetVar name="parent_id"$>"><$mt:CategoryLabel$></option>
  </mt:SetVarBlock>
  <$mt:SetVar name="depth" op="++"$>
  <$mt:SubCatsRecurse$>
  <$mt:SetVar name="depth" op="--"$>
</mt:TopLevelCategories>
<mt:Loop name="options">
  <select id="depth_<$mt:GetVar name="__counter__"$>">
    <option value="">---</option>
    <$mt:GetVar name="__value__"$>
  </select>
</mt:Loop>
<mt:SetVarBlock name="depth"><$mt:GetVar name="options" function="count"$>
</mt:SetVarBlock>
<$mt:SetVar name="depth" op="--"$>
<$mt:SetVar name="d2" value="2"$>
<script type="text/javascript">
$('document').ready(function() {
<mt:For var="d1" from="1" to="$depth">
  $('#depth_<$mt:GetVar name="d2"$>').chained('#depth_<$mt:GetVar name="d1"$>');
  <mt:SetVar name="d2" op="++"$>
</mt:For>
});
</script>

このテンプレートの中身の解説は、後日行います。