Jak jste řekl, že nemáte zkušenosti s jQuery nebo Ajaxem, svou odpověď zveřejním s co největším počtem komentářů. Předpokládám, že na stránce máte dvě vybrané rozevírací nabídky.
První obsahuje stavitele, takže bude mít id="builders"
.
Druhý obsahuje regiony, takže bude mít id="regions"
.
Z toho, co jsem pochopil, první výběr bude přesně ten, který jste zveřejnili ve své otázce, vygenerovaný na straně serveru (pomocí PHP). Žádám vás pouze o to, abyste na něm provedli mírnou změnu tak, aby se každá hodnota možnosti rovnala ID databáze tvůrce, nikoli jeho názvu (pokud primárním klíčem tvůrce není jejich jméno, a nikoli ID). Pro konečného uživatele to nebude žádný rozdíl, ale bude to důležité pro naše řešení jQuery. Druhá bude prázdná, protože záměrem je dynamicky ji vyplnit oblastmi souvisejícími s stavitelem vybraným v první rozbalovací nabídce.
Nyní přejdeme ke kódu 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);
}
});
});
});
Navzdory jakýmkoliv syntaktickým chybám (odtud nelze kód otestovat) by to mělo stačit. Doufám, že komentáře byly dostatečně jasné, abyste pochopili, jak věci v jQuery fungují.