jQueryやAjaxの経験がないとおっしゃっていましたが、できるだけ多くのコメントを付けて回答を投稿します。ページに2つの選択ドロップダウンがあると想定します。
最初のものにはビルダーが含まれているため、id="builders"
が含まれます 。
2つ目はリージョンが含まれているため、id="regions"
が含まれます。 。
私が理解していることから、最初の選択は、質問で投稿したものとまったく同じであり、サーバー側で(PHPによって)生成されます。 わずかな変更を加えてください。各オプションの値は、名前ではなく、ビルダーのデータベースIDと等しくなります(ビルダーの主キーがIDではなく名前である場合を除く)。これは最終ユーザーには違いはありませんが、jQueryソリューションにとって重要です。 最初のドロップダウンで選択したビルダーに関連する領域を動的に埋めることが目的であるため、2番目のものは空になります。
それでは、jQueryコードに取り掛かりましょう:
//Everything that goes below this first line will be ready as soon as the page is fully loaded
$(document).ready(function() {
//The following code defines an event. More precisely, we are defining that the code inside it will run every time our select with id "builders" has its value changed
$('#builders').change(function() {
//$(this) is our builders select. $(this).val() contains the selected value, which is the ID of our selected builder
var currentValue = $(this).val();
//Now, this is our Ajax command that will invoke a script called get_regions.php, which will receive the builder's ID in $_GET['builder_id'] and you can use to query your database looking for all regions related to this builder. Make sure to create an array with the returned regions. Your get_regions.php's last line should be echo json_encode($regions);
$.get("get_regions.php", {'builder_id': currentValue}, function(data) {
//Inside this function is the code that will run when we receive the response from our PHP script. It contains a JSON encoded list of regions, so first of all we need to parse this JSON
var regions = $.parseJSON(data);
//Before filling our second select dropdown with the regions, let's remove all options it already contains, if any
$('#regions').empty();
//Now, all there is left is to loop over the regions, adding each as an option of the regions dropdown. I'll do it the universal way
for (var i = 0; i < regions.length; i++) {
var regionOption = '<option value="'+regions[i]['region_name']+'">';
regionOption += regions[i]['region_name'];
regionOption += '</option>';
$('#regions').append(regionOption);
}
});
});
});
構文エラー(ここからコードをテストすることはできません)にもかかわらず、これでうまくいくはずです。コメントがjQueryでどのように機能するかを理解するのに十分明確であることを願っています。