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を仕掛けて良いのか見当がつかない状態です。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/07/28 17:23:50
  • 終了:2014/08/04 17:25:04

回答(1件)

id:Yacky No.1

エネゴリ回答回数1374ベストアンサー獲得回数1542014/07/28 21:30:10

ポイント300pt

追記
すいません。こちらの方が良いと思います。
http://d.hatena.ne.jp/Mars/20071109
ほか参考サイト
http://wataame.sumomo.ne.jp/archives/4593

id:jamis

回答ありがとうございます。

2014/08/02 13:30:48
  • id:Yacky
    jqueryで作ったものではダメでしょうか?
    あくまでajaxで作ったものではないといけないですか?
  • id:jamis
    jqueryでも全く問題ありません。
    非同期でアクセスができ、jsonデータ(jsonファイル・データベースから)を読み込める3段階形式のものを求めています。
  • id:takuya_1st
    CSS3のセレクタだけで出来る。
    JavaScript とDOMだけでもできる。
    jQueryは必要とも限らない。

    住所は変化することがないので ajaxである必要もないと思う。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません