php - jquery从数据库中填充多个下拉列表

Question

我知道如何使用 jQuery 使用数据库中的值填充单个下拉框。但现在我需要做一个长查询来使用下拉列表过滤掉 5 个表字段。也就是说，通过选择第一个，我需要更改剩余的 4 个下拉列表值，通过更改第二个下拉列表，我需要更改其他 3 个下拉列表，依此类推。为了更改单个下拉列表，我使用 Ajax 发送到 URL，然后返回 html 并将其放在 , select 字段中。

jQuery.ajax({
        type: "POST",
        url: "getdb/tb",
        data: '{data : "data" }',
        success: function (data) {
           jQuery("select#field_1").html(returnval);  
        },
        failure: function (response) {
           alert("failed");
        }
});  

在我的 URL“getdb/tb”中，我使用 SELECT 语句过滤掉查询并回显选项字段。
但是我不知道如何使用第一个下拉列表中的单个更改功能将多个 html 选项字段发送到我的其他 4 个下拉列表。请帮助并把我当作初学者。提前致谢。

更新: 这样做好吗

 jQuery.ajax({
      -
      -
      success: function(data){
         callfirst();
      }
});

function callfirst(){
   jQuery.ajax({
         -
         -
         success: function(data){
             callsecond();
         }
    });
 }

 function callsecond(){
     jQuery.ajax({
          -
          -
          success: function(data){
               callthird();
          }
 }

Answer 1

您的方法很好 - 但需要多次 ajax 调用才能为所有选择字段带来选项值。您可以使用 JSON 在单个 ajax 调用中完成此操作。在 PHP 页面上，您可以创建一个数组，该数组将包含代表四个选择框的选项的 HTML 字符串。然后您可以使用 json_encode() 函数将该数组转换为 JSON 字符串:

$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);

然后在网页上，对于第一个下拉菜单，你可以这样写一个jQuery函数:

 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"]);
  }
});
}

通过这种方式，您可以在一次 ajax 调用中加载所有其他下拉菜单的选项。我知道您也需要为其他下拉菜单提供类似的功能。您也可以为其他下拉菜单编写类似的功能。这是一个通用函数，您在其中传递下拉列表编号，该函数将返回目标下拉列表的选项。例如，如果您传递数字 2 的下拉列表，该函数将返回下拉列表 3、4 和 5 的选项。如果您传递数字 3，它将返回下拉列表 4 和 5 的选项，依此类推。

 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"]);
     }
  }
});
}

在PHP页面上，您可以编写如下代码来实现该功能:

$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);

可以找到有关 JSON 的更多信息 here .