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

【问题标题】：jquery to fill multiple dropdown list from databasejquery从数据库中填充多个下拉列表
【发布时间】：2015-02-09 10:40:24
【问题描述】：

我知道如何使用 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();
          }
 }

【问题讨论】：

我想，你的不错。这就像相互依赖的 API。当第二个下拉菜单发生变化时，您调用 callsecond() ......等等
但我认为必须有另一种方法来解决这个问题。任何 jQuery 领导者，请指导我...

标签： php jquery mysql ajax

【解决方案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找到。

【讨论】：