Showing details of a single record after selection from two dropdown list

Title: Mango : Fruits
Details: Mangoes are juicy and high in Nutritional value

After selecting a record by using two dropdowns we can display full details of the selected record. This is part 2 of the tutorial of two interlinked dropdown listbox .

Here are the files used in the script

dd.php :

main front end script which displays two selections

ddck.php :

Back end PHP script to collect matching options for second list. Returns data as JSON string

ddck2.php :

Back end PHP script receives subcat_id and returns the full detials of the matching record to display.

dd-submit.php :

Receives the selected options after submission of the form.

config.php :

Database connection string , used by dd.php and ddck.php files. Read more on MySQLi Database connection

sql-sump.txt :

Use this sql dump to create tables used in this script.

dd.php : Showing the list box and jQuery

This file populates the first drop down list ( category ) by taking records from category table. For this it connects to database and collects all the records and add them as options to category list box.
Category name is displayed as Text part and cat_id is taken as options.
Here is the code to populate the 1st list box ( note: jQuery is not used )

<form method=post action=dd-submit.php>
<select name=category id=category>
<option value='' selected>Select</option>
<?Php
require "config.php";// connection to database 
// Query to collect data 
$sql="select * from dd2_category where cat_id not in (5,6)"; 

if ($result_set = $connection->query($sql)) {
while($row = $result_set->fetch_array(MYSQLI_ASSOC)){
echo "<option value=$row[cat_id]>$row[category]</option>";
}
}
echo "</select>";
?>

Now we have seen in our previous listbox tutorial how to collect user selection of a list box. Here also once the category is selected by user the change function get fired.

$('#category').change(function(){

Inside this function we will collect the user selection and store it a JavaScript variable cat_id . If required we can also collect text part of the selection, this part is commented in the present script however you can use them instead of selected options.

var cat_id=$('#category').val();

After getting the variable now we will send it to backend script (ddck.php) and get new set of sub categories for our second dropdown , before that we will remove the existing options if any for the second dropdown.

$('#sub-category').empty();

Now we will use get method to post cat_id to backend script ddck.php and get all the matching records. These records are added as option to our second list box with id = sub_category.

$.get('ddck.php',{'cat_id':cat_id},function(return_data){

When we receive the data for sub category we will get JSON string so we need to loop through and add each option to drop down listbox.

$.each(return_data.data, function(key,value){
$("#sub-category").append("

<option value=" + value.subcat_id +">"+value.subcategory+"</option>

");
});
}, "json");

You can read more on how to add option to an existing dropdown list box.
Now the above process repeats once the first dropdown of category is changed by user.

$('#category').change(function(){
var cat_id=$('#category').val();
$('#sub-category').empty(); //remove all existing options
///////
$.get('ddck.php',{'cat_id':cat_id},function(return_data){
$.each(return_data.data, function(key,value){
$("#sub-category").append("<option value=" + value.subcat_id +">"+value.subcategory+"</option>");
	});
	my_function(); // Show the details of the record 
}, "json");
///////
});

Backend script ddck.php

This page receives the posted value of cat_id and collects the matching records from dd2_subcategory table. The output is posted back as JSON string to calling page ( dd.php ) . Here is the complete code.

<?Php
@$cat_id=$_GET['cat_id'];
/// Preventing injection attack //// 
if(!is_numeric($cat_id)){
echo "Data Error";
exit;
 }
/// end of checking injection attack ////
require "config.php";
$my_array=array();
$sql="select subcategory,subcat_id from dd2_subcategory where cat_id=?";
$result_set = $connection->prepare($sql);
$result_set->bind_param('i',$cat_id);
$result_set->execute();
$result = $result_set->get_result();
while ($row = $result->fetch_assoc()) {
$my_array[]=array("subcat_id"=>$row['subcat_id'],"subcategory"=>$row['subcategory']);
}

$main = array('data'=>$my_array);
echo json_encode($main);
?>

Getting the selected record details after selection of 2nd dropdown list

Once the 2nd dropdown list option is selected or changed we can pass the subcat_id value to our backend PHP script to get all the details ( field values ) of the record. Here we have used one more table dd2_subcategory_dtl to store details of the record against each subcat_id. You can extend the table with more fields to keep more details against each subcat_id . ( You can download the SQL dump to create your tables available inside ZIP file at the end of this tutorial )

$('#sub-category').change(function(){
my_function();
});
///////
my_function=function my_function(){
var subcat_id=$('#sub-category').val();

$.get('dropdown-list-double-dtlck.php',{'subcat_id':subcat_id},function(return_data){
$('#d2').html(return_data); // Record details as returned from database table.
})
}

Here we have used my_function() to send the subcat_id to backend script and collect the record details to display. The same function is also called when the 2nd dropdown is populated with data and one of the option is selected ( see the code above inside $('#category').change(function() )

PHP Script at ddck2.php

Our backend PHP script ddck2.php received the subcat_id value and collects the details of the matching record and post it to our main script.

How to get details of a single record using MySQLi

Finally we display the output of ddck2.php in our main script. dd-submit.php
After selecting category and subcategory the user can submit the form. The data is collected and displayed inside dd-submit.php page.

<?Php
$category=$_POST['category'];
$sub_category=$_POST['sub-category'];

echo "Category : $category <br> 
Sub-category = $sub_category ";

?>

How to Install the script.

Open config.php file and enter your database login details.
Create tables by using sql-dump.txt file inside phpmyadmin
Open dd.php file through your server .

This tutorial uses the concepts adding option to list box , posting data using get method and JSON parsing of string to get data. You can further extend to create three dropdown list linking to each other.

jQuery Listbox

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Details of a record after selection from dropdown listbox