Da Sie gesagt haben, dass Sie keine Erfahrung mit jQuery oder Ajax haben, werde ich meine Antwort mit so vielen Kommentaren wie möglich posten. Ich gehe davon aus, dass Sie zwei Auswahl-Dropdowns auf Ihrer Seite haben.
Die erste enthält die Builder, also wird sie id="builders" haben .
Die zweite enthält die Regionen, also hat sie id="regions" .
Soweit ich weiß, ist die erste Auswahl genau die, die Sie in Ihrer Frage gepostet haben, die serverseitig (von PHP) generiert wird. Ich bitte Sie nur, eine kleine Änderung daran vorzunehmen, sodass jeder Optionswert gleich der Datenbank-ID des Builders und nicht seinem Namen ist (es sei denn, der Primärschlüssel des Builders ist sein Name und keine ID). Dies macht für den Endbenutzer keinen Unterschied, ist aber für unsere jQuery-Lösung wichtig. Der zweite ist leer, da die Idee darin besteht, ihn dynamisch mit den Regionen zu füllen, die sich auf den in der ersten Dropdown-Liste ausgewählten Builder beziehen.
Nun kommen wir zum jQuery-Code:
//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);
}
});
});
});
Trotz etwaiger Syntaxfehler (kann den Code von hier aus nicht testen) sollte dies den Zweck erfüllen. Ich hoffe, die Kommentare waren klar genug, damit Sie verstehen, wie die Dinge in jQuery funktionieren.
