札幌Web制作のシンクグラフィカ

親ノードで選択された値を元に、子ノードのselectタグの内容を可変させるといった、いわゆるドリルダウン式のselect要素を簡単に実装するためのアドオン機能です。

ドリルダウン機能のデモはデモページをご参照ください。

例えば親ノードとして以下のようなタグが在った場合、

＜select name="行きたい県" data-drillfor="childselect"＞
  ＜option value="北海道"＞北海道＜/option＞
  ＜option value="沖縄県"＞沖縄県＜/option＞
＜/select＞

＜select id="childselect" name="行きたい都市"＞
  ＜optgroup label="北海道"＞
    ＜option value="札幌市"＞札幌市＜/option＞
    ＜option value="小樽市"＞小樽市＜/option＞
  ＜/optgroup＞
  ＜optgroup label="沖縄県"＞
     ＜option value="那覇市"＞那覇市＜/option＞
     ＜option value="石垣市"＞石垣市＜/option＞
  ＜/optgroup＞
＜/select＞

少しややこしいですが、親ノードの＜option＞タグと、子ノードの＜optgroup＞の値を比較して、ドリルダウンを実現しています。data-drillfor属性で子ノードのIDを指定します。ドリルダウンは2段だけではなく、3段、4段と深くリレーションさせることもできます。