Home >Backend Development >PHP Tutorial >How to Create Dynamically Populated Dependent Drop-Down Boxes Using PHP and AJAX?

How to Create Dynamically Populated Dependent Drop-Down Boxes Using PHP and AJAX?

Mary-Kate OlsenOriginal: 2024-12-11 00:04:10448browse

Dynamically Populated Drop Down Boxes

In this example, we aim to create a dynamic drop down box where the options in the second drop down box are dependent on the selection made in the first drop down box.

Here's a modified version of your code:

tester.php

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#stSelect').change(function() {
                    var sel_stud = $(this).val();
                    $.ajax({
                        type: "POST",
                        url: "another_php_file.php",
                        data: 'theOption=' + sel_stud,
                        success: function(whatigot) {
                            $('#LaDIV').html(whatigot);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

    <select name="students">

another_php_file.php

<?php
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);

//Get value posted in by ajax
$sel_stud = $_POST['theOption'];

//Run DB query
if($sel_stud == "Electronics"){
    $query = "SELECT * FROM `category` WHERE `master` = 1";
}elseif($sel_stud == "Clothes"){
    $query = "SELECT * FROM `category` WHERE `master` = 2";
}else{
    $query = "SELECT * FROM `category` WHERE `master` = 3";
}
$result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);

//Prepare response html markup
$r = '
        
        <select>
';

//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0) {
    while ($row = mysql_fetch_assoc($result)) {
        $r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
    }
} else {
    $r = '<p>No Items</p>';
}

echo $r;

In this example, the options in the second drop down box are populated dynamically based on the value selected in the first drop down box. The category table is modified to include a master field to group the options in the second drop down box.

The above is the detailed content of How to Create Dynamically Populated Dependent Drop-Down Boxes Using PHP and AJAX?. For more information, please follow other related articles on the PHP Chinese website!

php ajax include using this table

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can PHP's `array_column` Function Flatten a Multidimensional Array?Next article：How Can PHP's `array_column` Function Flatten a Multidimensional Array?

See more

How to Create Dynamically Populated Dependent Drop-Down Boxes Using PHP and AJAX?

Related articles