Two Linked Dropdown Lists

A dependent dropdown loads the second list after the user selects a value in the first list. Reset stale child options before requesting the new data.

First and Second Select Top ↑

<select id="category"></select>
<select id="subcategory" disabled></select>

Load Child Options Top ↑

$( "#category" ).on(
    "change",
    function () {
        const categoryId =
            $( this ).val();

        const $child =
            $( "#subcategory" )
                .empty()
                .prop(
                    "disabled",
                    true
                );

        if ( !categoryId ) {
            return;
        }

        $.getJSON(
            "subcategory-data.php",
            { category_id: categoryId }
        )
        .done(function ( rows ) {
            $.each(
                rows,
                function ( index, row ) {
                    $( "<option>", {
                        value: row.id,
                        text: row.name
                    }).appendTo( $child );
                }
            );

            $child.prop(
                "disabled",
                false
            );
        });
    }
);

Backend Query Top ↑

$categoryId = filter_input(
    INPUT_GET,
    'category_id',
    FILTER_VALIDATE_INT
);

$stmt = $dbo->prepare(
    'SELECT id, name
     FROM subcategory
     WHERE category_id = :category_id
     ORDER BY name'
);

$stmt->execute([
    'category_id' => $categoryId
]);

Demo: two dependent dropdowns →

Download two-dropdown project

Show record details after the second selection →

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

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

foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[cat_id]>$row[category]</option>";
}
?>
</select>
<select name=sub-category id=sub-category>
</select>
<input type=submit value=Submit></form>

Original example 2

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

Original example 3

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

Original example 4

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

Original example 5

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

Original example 6

$.each(return_data.data, function(key,value){
$("#sub-category").append("
<option value=" + value.subcat_id +">"+value.subcategory+"</option>
");
});
}, "json");

Original example 7

<?Php
@$cat_id=$_GET['cat_id'];
//$cat_id=2;
/// Preventing injection attack //// 
if(!is_numeric($cat_id)){
echo "Data Error";
exit;
 }
/// end of checking injection attack ////
require "config.php";

$sql="select dd2_subcategory,subcat_id from subcategory where cat_id='$cat_id'";
$row=$dbo->prepare($sql);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);

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

Original example 8

$result = array();
if($stmt = $connection->prepare("select subcategory,subcat_id from dd2_subcategory where cat_id=?")){
 $stmt->bind_param('i',$cat_id);
 $stmt->execute();
 $stmt = $stmt->get_result();
 $no_of_records=$stmt->num_rows;
 while ($row = $stmt->fetch_assoc()) {
    $result[]=$row;
  }
}else{
  echo $connection->error;
}

$main = array('data'=>$result,'no_of_records'=>$no_of_records);
echo json_encode($main);

Original example 9

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

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

?>

Original example 10

$no_of_records = $dbo->query("select count(cat_id) from  dd2_subcategory where cat_id='$cat_id'")->fetchColumn();

if($no_of_records >=1){
$sql="select subcategory,subcat_id from dd2_subcategory where cat_id='$cat_id'";
$row=$dbo->prepare($sql);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);
}else{
$result='';
}

$main = array('data'=>$result,'no_of_records'=>$no_of_records);
echo json_encode($main);

Original example 11

if(return_data.no_of_records>=1){
	$('#t1').hide();
	$('#sub-category').show();
$.each(return_data.data, function(key,value){
$("#sub-category").append("<option value='" + value.subcat_id +"'>"+value.subcategory+"</option>");
});
}else{
/// add text box and hide 2nd subcategory 
$('#sub-category').hide();
$('#t1').show();
}

Additional Original Learning Routes Top ↑

• ../php_tutorial/json_data-formatting.php
• ../php_tutorial/mysqli.php
• ../php_tutorial/mysqli_connection.php
• ../php_tutorial/pdo-connection.php
• ../php_tutorial/pdo.php
• dropdown-list-three.php
• football-team.php
• http-get.php
• listbox-redirect.php
• listbox.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: