jquery để điền vào nhiều danh sách thả xuống từ cơ sở dữ liệu

Cách của bạn là tốt - nhưng sẽ cần nhiều lệnh gọi ajax để mang lại các giá trị tùy chọn cho tất cả các trường được chọn. Bạn có thể thực hiện điều này trong một lệnh gọi ajax duy nhất bằng JSON. Tại trang PHP, bạn có thể tạo một mảng chứa các chuỗi HTML đại diện cho các tùy chọn cho bốn hộp chọn. Sau đó, bạn có thể chuyển đổi mảng này thành một chuỗi JSON bằng cách sử dụng hàm json_encode ():

$arr=array("second"=>"<option>....</option>.......<option...</option>", //for second dropdown
           "third"=>"<option>....</option>.......<option...</option>", //for third dropdown
           "fourth"=>"<option>....</option>.......<option...</option>", //for fourth dropdown
           "fifth"=>"<option>....</option>.......<option...</option>" //for fifth dropdown
  );
 echo json_encode($arr);

Sau đó, trên trang web, đối với menu thả xuống đầu tiên, bạn có thể viết một hàm jQuery như sau:

 function loadOptions(){
jQuery.ajax({

  success: function(data){
     jQuery("select#field_2").html(data["second"]);
     jQuery("select#field_3").html(data["third"]);
     jQuery("select#field_4").html(data["fourth"]);
     jQuery("select#field_5").html(data["fifth"]);
  }
});
}

Bằng cách này, bạn có thể tải các tùy chọn cho tất cả các danh sách thả xuống khác trong một lệnh gọi ajax. Tôi hiểu rằng bạn cũng cần một chức năng tương tự cho các trình đơn thả xuống khác. Bạn cũng có thể viết hàm tương tự cho các trình đơn thả xuống khác. Đây là một chức năng tổng quát, trong đó bạn chuyển số thả xuống và hàm sẽ trả về các tùy chọn cho danh sách thả xuống được nhắm mục tiêu. Ví dụ:nếu bạn vượt qua menu thả xuống số 2, hàm sẽ trả về các tùy chọn cho menu thả xuống 3, 4 và 5. Nếu bạn vượt qua số 3, hàm sẽ trả về các tùy chọn cho menu thả xuống 4 và 5, v.v.

 function loadOptions(selectNo){
jQuery.ajax({
  data:{"selectNo",selectNo},
  success: function(data){
     switch(selectNo){
     case 1: jQuery("select#field_2").html(data["second"]);
     case 2: jQuery("select#field_3").html(data["third"]);
     case 3: jQuery("select#field_4").html(data["fourth"]);
     case 4: jQuery("select#field_5").html(data["fifth"]);
     }
  }
});
}

Trên trang PHP, bạn có thể viết mã bên dưới để triển khai chức năng này:

$selectNo=$_GET["selectNo"];
$arr=array();
switch(selectNo){
case 1: $arr["second"]="<option>....</option>.......<option...</option>"; //for second dropdown
case 2: $arr["third"]="<option>....</option>.......<option...</option>"; //for third dropdown
case 3: $arr["fourth"]="<option>....</option>.......<option...</option>"; //for fourth dropdown
case 4: $arr["fifth"="<option>....</option>.......<option...</option>"; //for fifth dropdown
}
 echo json_encode($arr);

Thông tin thêm về JSON có thể được tìm thấy tại đây .