Showing content in select box base on previous select box - php

Question

hello developer community.I need your help.i am building a project on attendance management.In this project,i got stucked on one feature.
what i want is to display the departments based on the block input without going to next page.
<div class="form-group">
<label for="block" class="control-label col-sm-2">Select block:</label>
<div class="col-xs-10">
<select class="form-control" name="block" id="block">
<option selected="selected" value="">Select Block:</option>
<?php
$q="select * from blocks ORDER BY block_name";
$res=mysqli_query($con,$q);
while($row=mysqli_fetch_array($res)){
echo "<option value='$row[block_id]'class='form-control'>".$row['block_name']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="department" class="control-label col-sm-2">Select department:</label>
<div class="col-xs-10">
<select class="form-control" name="department" id="department">
<option selected="selected" value="">Select Department:</option>
<?php
$q="select * from departments ORDER BY department_name";
$res=mysqli_query($con,$q);
while($row=mysqli_fetch_array($res)){
echo "<option value='$row[department_id]'class='form-control'>".$row['department_name']."</option>";
}
?>
</select>
</div>

Answer 1

Create a PHP file, e.g. dep-getter.php
<?php
// Include your connection config
include 'db-config.php';
// getting block value
$block = $_GET['block'];
$where = !empty($_GET['block']) ? "block='$block'" : '1=1';
$q="select * from departments ORDER BY department_name WHERE $where";
$res=mysqli_query($con,$q);
while($row=mysqli_fetch_array($res)){
echo "<option value='$row[department_id]'class='form-control'>".$row['department_name']."</option>";
}
?>
JavaScript/jQuery:
$(document).ready(function() {
$('.block-select').change(function() {
var val = $(this).val();
$.ajax({
url: '/path/to/dep-getter.php?block='+val,
method: 'GET',
success: function(data) {
$('.select-department').html(data);
},
error: function() {
console.log('Something went wrong!');
}
});
});
});
I use the before code for simple understanding. For detail explaination, you can read Ajax documentation.
Note:
You need adding class to Department select option with name select-department as a target to put ajax result.
Hope this help you.

Answer 2

The best way I think is using Ajax.
But if you don't know about Ajax yet, the idea is to reload the current page with appending query string with Block value, and then show the Department base on block value.
So, for getting block value and reloading you can use jQuery for simple way.
The code come like this.
The Block select option (adding class for selector):
<select class="block-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
JavaScript/jQuery:
$(document).ready(function() {
$('.block-select').change(function() {
var val = $(this).val();
var curUrl = window.location.href;
// Append the value to current URL & reload
var targetUrl = curUrl + '?block=' + val;
window.location.href = targetUrl;
});
});
And then change your Department select option to like this:
<select class="form-control" name="department" id="department">
<?php
$where = !empty($_GET['block']) ? "block='$_GET[block]'" : '1=1';
$q="select * from departments ORDER BY department_name WHERE $where";
$res=mysqli_query($con,$q);
while($row=mysqli_fetch_array($res)){
echo "<option value='$row[department_id]'class='form-control'>".$row['department_name']."</option>";
}
?>
</select>
The above code will checking for block value from URL, if the block not empty then we will get department data by block value, otherwise get all.