Som du sagde, du ikke har erfaring med jQuery eller Ajax, vil jeg sende mit svar med så mange kommentarer som muligt. Jeg antager, at du har to udvalgte rullemenuer på din side.
Den første indeholder bygherrerne, så den vil have id="builders"
.
Den anden indeholder regionerne, så den vil have id="regions"
.
Så vidt jeg forstår, vil det første valg være præcis det, du postede i dit spørgsmål, genereret på serversiden (af PHP). Jeg beder kun om, at du venligst foretager en mindre ændring af den, så hver indstillingsværdi er lig med bygherrens database-id og ikke dens navn (medmindre bygherrens primære nøgle er deres navn og ikke et ID). Dette vil ikke gøre nogen forskel for den endelige bruger, men vil være vigtigt for vores jQuery-løsning. Den anden vil være tom, da ideen er at udfylde den dynamisk med de områder, der er relateret til bygherren, der er valgt i den første rullemenu.
Lad os nu komme til jQuery-koden:
//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);
}
});
});
});
På trods af eventuelle syntaksfejl (kan ikke teste koden herfra) burde dette gøre tricket. Håber kommentarerne var klare nok til, at du kunne forstå, hvordan tingene fungerer i jQuery.