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

ドリルダウン機能

複数の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段と深くリレーションさせることもできます。