3

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.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.

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();
          }
 }
Improve this question
2
  • I think, your's good one. It is like inter-dependencies API.you call callsecond() when second dropdown is changing...so on Commented Dec 11, 2014 at 7:00
  • but i think there must be another way to tackle this problem.. Any jQuery leaders, please guide me... Commented Dec 11, 2014 at 7:22

1 Answer 1

Reset to default
2

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"=>"<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:

 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"]="<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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.