Dynamic Dependent drop down list PHP, jQuery, AJAX,MySQL

I am trying to create a dependent drop-down list (level, class, specialty, module). Each selection will get data from a MySQL database. I need to create an input form that needs to be filled with a dynamic drop-down list.

I have a drop-down list of:

  • class depends on the level .
  • specialty depends on level and class .
  • module depends on level , class , and specialty .

MySQL tables:

TABLE levels ( idlev ,levname).

TABLE classes ( idclass ,classname).

TABLE levelsclasses( idlevclass ,idlev,idclass).

TABLE specialties( idspec ,idlev,specname).

TABLE classesspecialties( idclassspec ,idclass,idspec).

TABLE modules ( idmod ,modname).

TABLE levelsclassesspecialtiesmodules( idlevclassspecmod ,idlev,idclass,idspec,idmod).

database.sql : contains a database, database link: https://www.mediafire.com/file/vg35w20tmdvep44/file
main.php : contains code

<head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <title>Dynamic Dependent drop down </title>
        <script src="jquery.min.js"></script>
    </head>
    
   <?php
//mysql_set_charset('utf-8')
$conn = new mysqli("localhost", "root", "", "database");
mysqli_set_charset($conn,"utf8");
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>
<div class="page-title-box">
    <div class="row align-items-center">
        <div class="col-5">
            <h2 class="page-title">
                Try
            </h2>
        </div>
    </div>
</div>


<form action="#" enctype="multipart/form-data" method="POST" autocomplete="off">

                    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

                     <?php
                    $lev=array();
                    ?>
                    <div class="form-group">
                        <label>Level</label>
                        <select class="form-control" id="level" onchange="$('.sl_class').css('display','none'); 
                           $('.sl_spec').css('display','none'); $('#level_'+$(this).val()).css('display','');">
                            <option>Select Level</option>
                            <?php
                            $query = "SELECT * FROM levels";
                            $do = mysqli_query($conn,$query);
                            while ($row = mysqli_fetch_array($do))
                            {
                                $lev[]=$row;
                                echo'<option value="'.$row['idlev'].'">'.$row['levname'].'</option>';
                            }
                            ?>
                        </select>
                    </div><br><br>
                    <?php
                    $cla=array();
                    ?>
                    <div class="form-group">
                        <label>Class</label>
                        <?php
                        for ($i=0;$i<count($lev);$i++)
                        {
                        ?>
                        <select class="form-control sl_class" id="level_<?php echo $lev[$i]['idlev'];?>" style="display:none;" onchange="$('.sl_spec').css('display','none');  $('#class_'+$(this).val()).css('display','');">
                            <option>Select Class</option>
                            <?php
                            $query = "SELECT * FROM classes,levelsclasses where classes.idclass=levelsclasses.idclass AND idlev=".$lev[$i]['idlev'];
                            $do = mysqli_query($conn,$query);
                            while ($row = mysqli_fetch_array($do))
                            {
                                $cla[]=$row;
                                echo'<option value="'.$row['idclass'].'">'.$row['classname'].'</option>';
                            }
                            ?>
                        </select>
                        <?php
                        }
                        ?>
                    </div><br><br>
                    <?php
                    $spe=array();
                    ?>
                    <div class="form-group">
                        <label>Specialty</label>
                        <?php
                        for ($i=0;$i<count($lev);$i++)
                        {
                        ?>
                        <?php
                        for ($j=0;$j<count($cla);$j++)
                        {
                        ?>
                        <select class="form-control sl_spec" id="class_<?php echo $lev[$i]['idlev'] & $cla[$j]['idclass'];?>" style="display:none;"
                           onchange="$('.sl_mod').css('display','none');  $('#class_'+$(this).val()).css('display','');" >
                            <option>Select Specialty</option>
                            <?php
                            $query = "SELECT * FROM specialties,classesspecialties where specialties.idspec=classesspecialties.idspec AND idclass=".$cla[$j]['idclass'];
                            $do = mysqli_query($conn,$query);
                            while ($row = mysqli_fetch_array($do))
                            {
                                $spe[]=$row;
                                echo'<option value="'.$row['idspec'].'">'.$row['specname'].'</option>';
                            }
                            ?>
                        </select>
                        <?php
                        }
                        ?>
                        <?php
                        }
                        ?>
                    </div><br><br>
                                        <?php
                    $mo=array();
                    ?>
                    <div class="form-group">
                        <label>Modules</label>
                        <?php
                        for ($i=0;$i<count($lev);$i++)
                        {
                        ?>
                        <?php
                        for ($j=0;$j<count($cla);$j++)
                        {
                        ?>
                         <?php
                        for ($z=0;$z<count($spe);$z++)
                        {
                        ?>
                        <select class="form-control sl_mod" id="spec_<?php echo $spe[$z]['idspec'];?>" style="display:none;" onchange="$('.sl_mod').css('display','none');  $('#spec_'+$(this).val()).css('display','');">
                            <option>Select Module</option>
                            <?php
                            $query = "SELECT * FROM modules,levelsclassesspecialtiesmodules where modules.idmod=levelsclassesspecialtiesmodules.idmod AND idspec=".$spe[$z]['idspec'];
                            $do = mysqli_query($conn,$query);
                            while ($row = mysqli_fetch_array($do))
                            {
                                $mo[]=$row;
                                echo'<option value="'.$row['idmod'].'">'.$row['modname'].'</option>';
                            }
                            ?>
                        </select>
                        <?php
                        }
                        ?>
                        <?php
                        }
                        ?>
                        <?php
                        }
                        ?>
                    </div>
                </form>

Hi! :slight_smile:
1: You really didn’t say what the probelm is. A cursory glance at the code doesn’t show any obvious problems.
2: This is way too complex of a problem to diagnose on a forum by volunteers. If this code is really important, find a developer local to you and offer to pay them a couple of hours to sit down wiht you, really understand the problem, and help you craft and understand the solution.

Cheers! :slight_smile:
=C=

You can use a jQuery library called dependency drop down.

I didn’t really recollect the author but it would some your problem.

It’s easy to use too.

The only thing you might concern yourself with is the validation inside PHP.

1 Like