Ajax Memo - サンプル（２）AjaxとPHP -

サンプル（２）AjaxとPHP

サンプル（２）ではフォームのプルダウンで条件を選択し、CSVファイルのデータを読み込んで条件に該当する結果を表示するものです。

プルダウンの可変セレクトメニューの部分は、select タグ自体を差し替えると実態がないので onChange が無効になってしまいます。このため、PHPからはオプションに使用するデータを取得するのみとし、Javascript側で option を作り直しています。
２つ目のセレクトオプションの内容により、３つ目のセレクトオプションが決定するので、同期通信でリクエストを送信しています。

■Javascript


 // 検索結果画面初期表示用
function setList() {
    var chiku  = "0";
    var ken    = "0";

    setKenOption(chiku);
    setCityOption(chiku, ken);

    document.form1.selChiku.selectedIndex = 0;
    document.form1.selKen.selectedIndex   = 0;
    document.form1.selCity.selectedIndex  = 0;
}

// 地区選択時
function changeChiku(selChiku)
{
    var selKen  = "0";
    var selCity = "0";

    setKenOption(selChiku.value);
    setCityOption(selChiku.value, selKen);

    getResult(selChiku.value, selKen, selCity);
}

// 都道府県選択時
function changeKen(selChiku, selKen)
{
    var selCity = "0";

    setCiryOption(selChiku.value, selKen.value);

    if (selChiku.value == "0") {
        document.form1.selKen.selectedIndex = 0;
    }

    getResult(selChiku.value, selKen.value, selCity);
}

// 市区町村選択時
function changeCity(selChiku, selKen, selCity)
{
    if (selChiku.value == "0" || selKen.value == "0") {
        document.form1.selCity.selectedIndex = 0;
    }

    getResult(selChiku.value, selKen.value, selCity.value);
}

// 都道府県オプション設定
function setKenOption(chiku)
{
    len = document.form1.selKen.options.length;
    for (i=len-1; i>=0; i--){
        document.form1.selKen.options[i] = null;
    }

    //XMLHttpRequestオブジェクト生成
    var xmlhttp = createHttpRequest();
    if (xmlhttp == null) {
        return null;
    }

    var data = "selChiku=" + chiku;

    sendRequest(xmlhttp, "POST", "optionKen.php", false, data, callBack1);

    document.form1.selKen.selectedIndex = 0;
}
function callBack1(xmlhttp)
{
    var result = xmlhttp.responseText;

    var resArray = result.split(",");
    for (i=0; i<resArray.length; i++) {
        var kenArray = resArray[i].split("/");

        document.form1.selKen.options[i] =
             new Option(kenArray[1], kenArray[0]);
    }
}

// 市区町村オプション設定
function setCityOption(chiku, ken)
{
    len = document.form1.selCity.options.length;
    for (i=len-1; i>=0; i--){
        document.form1.selCity.options[i] = null;
    }

    //XMLHttpRequestオブジェクト生成
    var xmlhttp = createHttpRequest();
    if (xmlhttp == null) {
        return null;
    }

    var data = "";
    data += "selChiku=" + chiku;
    data += "&selKen=" + ken;

    sendRequest(xmlhttp, "POST", "optionKen.php", false, data, callBack2);

    document.form1.selCity.selectedIndex = 0;
}
function callBack2(xmlhttp)
{
    var result = xmlhttp.responseText;

    var resArray = result.split(",");
    for (i=0; i<resArray.length; i++) {
        var cityArray = resArray[i].split("/");

        document.form1.selCity.options[i] =
             new Option(cityArray[1], cityArray[0]);
    }
}

// データ検索
function getResult(chiku, ken, city)
{
    //XMLHttpRequestオブジェクト生成
    var xmlhttp = createHttpRequest();
    if (xmlhttp == null) {
        return null;
    }

    var data = "";
    data += "selChiku=" + chiku;
    data += "&selKen="  + ken;
    data += "&selCity=" + city;

    sendRequest(xmlhttp, "POST", "result.php", false, data, callBack);
}
function callBack(xmlhttp)
{
    var result = document.getElementById("result");
    result.innerHTML = xmlhttp.responseText;
}