ドリルダウン機能
複数のselectタグをリレーションしてドリルダウンさせるためのアドオンです。
親ノードで選択された値を元に、子ノードの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段と深くリレーションさせることもできます。