選択/ドロップダウンメニューPHPまたはHTMLの選択値を変数に取り込む方法

さて、本当に必要なのは、ページをリロードせずにサーバーと通信できるようにするAJAX呼び出しです。基本的には、countryパラメーターを指定して新しいHTTPリクエストを送信し、その中の都市のリストを取得するだけです。正しい方法は、JSONまたは同様の形式のデータ（都市）のみを送信し（HTTP応答）、そのプレゼンテーションも送信しない（html）ことですが、簡単にするために、開始したときと同じように作業を続けることができます（htmlでデータを返す）。

別のスクリプトで都市のHTMLselectBoxOptionsを生成するコードを分離することから始めます。そのスクリプトを使用して、AJAX（XMLHttpRequestライブラリ）を使用して特定の国の都市のリストを取得します。

これを見てください、それはあなたの問題の実用的な解決策です。ユーザーがcountrySelectBoxオプションを変更するたびに、HTTPリクエストが送信されます。これにより、都市の選択ボックスが必要なたびに更新されます。スクリプトを指すonchange属性のURLを変更するだけです（以前、移動する必要があると述べました）。コードの2番目のブロックを別のスクリプトに変換します。

<!DOCTYPE html>
<html>
<head>

    <script>
        function populateCities(citiesSelectBoxOptions){
            document.getElementById("city").innerHTML = citiesSelectBoxOptions;
        }

        function httpGetAsync(theUrl, callback)
        {
            alert(theUrl);
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                    callback(xmlHttp.responseText);
            }
            xmlHttp.open("GET", theUrl, true); // true for asynchronous
            xmlHttp.send(null);
        }
    </script>
</head>
<body>


<select name="country" id="country" onchange="httpGetAsync('www.yourdomain.com/getCities.php?country=' + this.options[this.selectedIndex].value, populateCities)">
    <option value="Country1">Country 1</option>
    <option value="Country2">Country 2</option>
</select>

<select name="city" id="city">

</select>

</body>
</html>

getCities.php

<?php

$db = pg_connect("$db_host $db_name $db_username $db_password");

$selectedCountry = $_GET['country'];

$query = "SELECT city FROM cities where country = ' $selectedCountry '";

$result = pg_query($query);
if (!$result) {
    echo "Problem with query " . $query . "<br/>";
    echo pg_last_error();
    exit();
}
printf ("<option value='Select'>Select a City</option>");
while($myrow = pg_fetch_assoc($result)) {
    printf ("<option value='$myrow[city]'>$myrow[city]</option>");
}
?>

編集：

httpGetAsyncはネイティブです（pure / vanilla javascriptのみが使用されます。他のライブラリは使用されません）ページをリロードせずにHTTPリクエストを送信できるようにするjavascript関数。 form-> submitと同じように、この関数の複雑さを隠すjQueryを使用しているようですが、このような単純なタスクにjQueryを使用するのはやり過ぎなので、httpGetAsyncがどのように機能するかを学ぶことをお勧めします。

このjavascript関数は必要ありません

function getCity(countryId)

代わりに、データベースと通信するコードをjavascriptではなく.phpファイルに配置する必要があります（javascriptはクライアント側であり、ブラウザーなどのクライアントマシンで実行されますが、phpはサーバーで実行されます）。 SQLはJavaScriptで記述しないでください。クライアント側のコードは、サーバー側のコーディングを介してのみ、データベースと直接通信することはできません。これを実現するには、PHPスクリプトgetCities.phpの値をHTTP応答としてクライアント（javascript）に返す必要があります。

HTTPリクエストを.phpファイルに送信すると、そのスクリプトはサーバー上で実行され、スクリプトの最後で「エコー」または「印刷」と言ったものはすべて、HTTP応答として自動的に送信されます。 HTTP応答を送信するために実際にコードを記述する必要はありません。それは自動的に行われます。クライアント側で必要なものは何でもエコー/印刷する必要があります。あなたの場合、特定の国のオプションを印刷する必要があります。

スクリプトは、データベースから都市を選択する必要がある国をどのように認識しますか？そうですね、パラメータ「country」を指定してHTTPリクエストを送信します。それはあなたがそれを提出するときにあなたのフォームが自動的に行っていることです。 Form内にあり、name属性が設定されているすべてのHTMLタグは、パラメーターとしてHTTPリクエストで送信されます。ただし、送信は使用できないため、手動で行う必要があります。

HTTP GETリクエスト内でパラメータを送信するのは非常に簡単です。次のURLをご覧ください：

localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3

サーバー側では、次の変数が入力されます。

$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'

GETとPOSTのしくみとその違いについて詳しくは、こちら>

getCities.phpファイルを作成することから始め、データベースと通信して都市オプションを生成するコードをコピーして貼り付けます。それは基本的にあなたがすでにしたことです、あなたはただそのコードを別の.phpファイルに入れる必要があります。したがって、クライアント（ブラウザ）が特定の国の都市のリストを要求すると、サーバーからそのリストを取得するために（httpGetAsync（）関数を使用して）HTTPリクエストを送信します。

index.phpのコピーにこのスクリプトを貼り付けます

<script>
    function populateCities(citiesSelectBoxOptions){
        document.getElementById("city").innerHTML = citiesSelectBoxOptions;
    }

    function httpGetAsync(theUrl, callback)
    {
        alert(theUrl);
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                callback(xmlHttp.responseText);
        }
        xmlHttp.open("GET", theUrl, true); // true for asynchronous
        xmlHttp.send(null);
    }
</script>

次に、onchange属性を選択ボックスに配置します。覚えておいてください。onChangeではなく、すべて小文字です。

<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">

ご不明な点がございましたら、お問い合わせください... :)