jquery to fill multiple dropdown list from database

Question

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

Answer 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:

$arr=array("second"=>"...........", //for second dropdown
           "third"=>"...........", //for third dropdown
           "fourth"=>"...........", //for fourth dropdown
           "fifth"=>"..........." //for fifth dropdown
  );
 echo json_encode($arr);

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

 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.

 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:

$selectNo=$_GET["selectNo"];
$arr=array();
switch(selectNo){
case 1: $arr["second"]="..........."; //for second dropdown
case 2: $arr["third"]="..........."; //for third dropdown
case 3: $arr["fourth"]="..........."; //for fourth dropdown
case 4: $arr["fifth"="..........."; //for fifth dropdown
}
 echo json_encode($arr);

More information about JSON can be found here.