Jquery to populate multiple dropdowns from database
I know how to populate one dropdown with values from a database using jQuery. But now I need to make a long query to filter 5 table fields using a dropdown. That is, by selecting the first one, I need to change the remaining value of the dropdown list, and by changing the second dropdown menu, I need to change the other 3 dropdowns, and so on. To change one dropdown, I used Ajax to submit the url and then returned the html and placed it inside the select box.
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 "getdb / tb" url, I am filtering the query with a SELECT statement and exiting the options field.
But I don't know how to send multiple html options fields to my 4 other dropdowns with one change function moved to the first dropdown. Please help and contact me newbie. Thank you in advance.
UPDATE: This is a good way to do it.
jQuery.ajax({
-
-
success: function(data){
callfirst();
}
});
function callfirst(){
jQuery.ajax({
-
-
success: function(data){
callsecond();
}
});
}
function callsecond(){
jQuery.ajax({
-
-
success: function(data){
callthird();
}
}
Your path is fine, but it will take many ajax calls to call option values for all select fields. You can accomplish this in one ajax call using JSON. In a PHP page, you can create an array that will contain HTML strings representing the parameters for the four select boxes. Then you can convert this array to JSON string using 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 web page for the first dropdown menu, 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"]);
}
});
}
This way you can load parameters for all other dropdowns in one ajax call. I understand that you need similar functionality for other dropdowns as well. You can write a similar function for other dropdown menus. Here is a generic function where you pass a dropdown number and the function will return parameters for the target dropdowns. For example, if you pass dropdown 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 below code to implement this function:
$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 on JSON can be found here .
source to share