Come hai detto che non hai esperienza con jQuery o Ajax, pubblicherò la mia risposta con il maggior numero possibile di commenti. Presumo che tu abbia due menu a discesa selezionati nella tua pagina.
Il primo contiene i builder, quindi avrà id="builders" .
Il secondo contiene le regioni, quindi avrà id="regions" .
Da quanto ho capito, la prima selezione sarà esattamente quella che hai pubblicato nella tua domanda, generata lato server (da PHP). Ti chiedo solo di apportare una leggera modifica su di esso, facendo in modo che ogni valore di opzione sia uguale all'ID del database del builder e non al suo nome (a meno che la chiave primaria del builder non sia il loro nome e non un ID). Questo non farà alcuna differenza per l'utente finale, ma sarà importante per la nostra soluzione jQuery. Il secondo sarà vuoto, in quanto l'idea è di riempirlo dinamicamente con le regioni relative al costruttore selezionato nel primo menu a tendina.
Ora veniamo al codice 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);
}
});
});
});
Nonostante eventuali errori di sintassi (non è possibile testare il codice da qui) questo dovrebbe fare il trucco. Spero che i commenti siano stati abbastanza chiari per farti capire come funzionano le cose in jQuery.
