Jak powiedziałeś, nie masz doświadczenia z jQuery lub Ajaxem, opublikuję swoją odpowiedź z jak największą ilością komentarzy. Zakładam, że masz na swojej stronie dwie listy rozwijane.
Pierwsza zawiera buildery, więc będzie miała id="builders" .
Drugi zawiera regiony, więc będzie miał id="regions" .
Z tego co rozumiem, pierwszy wybór będzie dokładnie tym, który wysłałeś w swoim pytaniu, wygenerowanym po stronie serwera (przez PHP). Proszę tylko o dokonanie niewielkiej zmiany, tak aby każda wartość opcji była równa identyfikatorowi bazy danych budowniczego, a nie jego nazwie (chyba że kluczem podstawowym budowniczego jest jego nazwa, a nie identyfikator). Nie będzie to miało znaczenia dla użytkownika końcowego, ale będzie ważne dla naszego rozwiązania jQuery. Drugi będzie pusty, ponieważ pomysł polega na dynamicznym wypełnieniu go regionami powiązanymi z kreatorem wybranym w pierwszym menu rozwijanym.
Teraz przejdźmy do kodu 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);
}
});
});
});
Pomimo wszelkich błędów składniowych (nie mogę przetestować kodu stąd) powinno to załatwić sprawę. Mam nadzieję, że komentarze były wystarczająco jasne, abyś mógł zrozumieć, jak wszystko działa w jQuery.
