I’m trying to create a dependent drop-down list (level, class, speciality, module). Each selection will get data from a MySQL database. I need to create an input form which needs to be filled with a dynamic drop-down list.
I have a drop-down list of: the class depends on the level. the speciality depends on the level and the class. the module depends on the level, the class and the speciality.
The problem :
- the specialty depends only on the class and not on the level and the class I want the specialty depends on the level and the class.
- the module does not depend on anything. i want depends on level, class, and speciality.
database.sql : contains a database, database link: https://www.mediafire.com/file/vg35w20tmdvep44/file
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).
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>
