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

I know how to fill a single dropdown box with the values from a database using jQuery. But now i need to make a long query to filter out 5 table fields using dropdown. That is, by selecting the first , i need to change the remaining 4 dropdowns list value, and by changing the second dropdown, i need to change the other 3 dropddowns and so on. For changing a single dropdown, i made use of Ajax to send to a URL, and then returning the html and placing it inside the , select field.

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

And in my URL "getdb/tb" , i filter out the query using SELECT statement and echo out the option field.
But i dont know how to send multiple html option field to my 4 other dropdowns with a single change function carried in the first dropdown. Please help and treat me a beginner. Thanks in advance.

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

UPDATE : Is it a good way to do like this

更新:这是一个很好的方式

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

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

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

1 个解决方案

#1

Your way is fine- but it will need many ajax calls to bring option values for all select fields. You can accomplish this in a single ajax call using JSON. At the PHP page, you can create an array which will contain the HTML strings representing the options for the four select boxes. Then you can convert this array to a JSON string using the json_encode() function:

你的方式很好 - 但它需要许多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);

Then on the webpage, for the first dropdown, you can write a jQuery function like this:

然后在网页上,对于第一个下拉列表,您可以编写如下的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"]);
  }
});
}

In this way, you can load the options for all other dropdowns in one ajax call. I understand that you need a similar functionality for other dropdowns as well. You can write similar function for other dropdowns also. Here is a generalized function, in which you pass the dropdown number and the function will return the options for targeted dropdowns. For example, if you pass dropdown number 2, the function will return options for dropdowns 3, 4 and 5. If you pass 3, it will return options for dropdowns 4 and 5, and so on.

通过这种方式,您可以在一个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"]);
     }
  }
});
}

On the PHP page, you can write the code below to implement this functionality:

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

More information about JSON can be found here.

有关JSON的更多信息,请访问此处。