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语句过滤掉查询并回显选项字段。
但我不知道如何在我的4个其他下拉列表中发送多个html选项字段，并在第一个下拉列表中执行单个更改功能。请帮帮我一个初学者。提前致谢。

更新：这是一个很好的方式吗

 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。

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

1 个答案: