Zoals je zei heb je geen ervaring met jQuery of Ajax, ik zal mijn antwoord met zoveel mogelijk commentaar posten. Ik ga ervan uit dat je twee keuzemenu's op je pagina hebt staan.
De eerste bevat de builders, dus deze heeft id="builders" .
De tweede bevat de regio's, dus deze heeft id="regions" .
Van wat ik begrijp, zal de eerste selectie precies degene zijn die je in je vraag hebt gepost, server-side gegenereerd (door PHP). Ik vraag u alleen om er een kleine verandering in aan te brengen, zodat elke optiewaarde gelijk is aan de database-ID van de bouwer en niet aan de naam (tenzij de primaire sleutel van de bouwer hun naam is, en niet een ID). Dit maakt geen verschil voor de eindgebruiker, maar is wel belangrijk voor onze jQuery-oplossing. De tweede is leeg, omdat het de bedoeling is om deze dynamisch te vullen met de regio's die gerelateerd zijn aan de bouwer die in de eerste vervolgkeuzelijst is geselecteerd.
Laten we nu naar de jQuery-code gaan:
//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);
}
});
});
});
Ondanks eventuele syntaxisfouten (kan de code hier niet testen) zou dit de slag moeten slaan. Ik hoop dat de opmerkingen duidelijk genoeg waren om te begrijpen hoe dingen werken in jQuery.