Như bạn đã nói rằng bạn không có kinh nghiệm với jQuery hoặc Ajax, tôi sẽ đăng câu trả lời của tôi với càng nhiều bình luận càng tốt. Tôi sẽ giả sử rằng bạn có hai trình đơn thả xuống được chọn trong trang của mình.
Cái đầu tiên chứa các trình tạo, vì vậy nó sẽ có id="builders" .
Cái thứ hai chứa các vùng, vì vậy nó sẽ có id="regions" .
Theo những gì tôi hiểu, lựa chọn đầu tiên sẽ chính xác là lựa chọn bạn đã đăng trong câu hỏi của mình, được tạo phía máy chủ (bằng PHP). Tôi chỉ yêu cầu bạn thực hiện một thay đổi nhỏ đối với nó, làm cho mỗi giá trị tùy chọn bằng với ID cơ sở dữ liệu của người xây dựng chứ không phải tên của nó (trừ khi khóa chính của người xây dựng là tên của họ chứ không phải ID). Điều này sẽ không có gì khác biệt đối với người dùng cuối cùng nhưng sẽ quan trọng đối với giải pháp jQuery của chúng tôi. Cái thứ hai sẽ trống vì ý tưởng là điền động nó với các vùng liên quan đến trình tạo được chọn trong menu thả xuống đầu tiên.
Bây giờ chúng ta hãy truy cập mã 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);
}
});
});
});
Mặc dù có bất kỳ lỗi cú pháp nào (không thể kiểm tra mã từ đây), điều này sẽ thực hiện thủ thuật. Hy vọng các nhận xét đủ rõ ràng để bạn hiểu cách mọi thứ hoạt động trong jQuery.
