3段階の連動セレクトボックスの作り方

こちらのページを参考に2段階のセレクトボックスを作成しました。
http://ajax.jlamp.net/

このセレクトボックスを3段階のものに変更したいと考えています。

北海道→札幌市→三丁目

というように選択できる形にしたいのです。

>|JavaScript|
<script type="text/javascript">
$(function(){
$("#pref").change(function(){
var pref = $(this).children("option:selected").val();
//alert(pref); // デバッグ用
var filename = "addressdata/" + pref + ".json";

// 市町村セレクトボックスをいったん、空に
$("#city").html("<option value=\"-1\">----</option>");
if (pref!="-1"){
$.getJSON(filename, function(json){
$.each(json, function(i){
$("#city").append("<option value=\"" + json[i].officialCode + "\">" + json[i].city + "</option>");
});
});
}
});
});
</script>
||<

二段目は単純に参考サイトをまねてajaxとphp、mysqlで実装できましたが、三段階目のセレクトボックスの作り方がわかりません。
二段目がデータベースから取得している形で、なおかつ内容がソースに出るわけではないので、その要素にどのようにajaxを仕掛けて良いのか見当がつかない状態です。

三段階セレクトボックスの作り方を教えてください。