从数据库填充多个下拉列表的jquery

Question

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

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语句筛选出查询，并回显option字段。

但我不知道如何将多个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的更多信息可以找到这里。