How select only particular designations from the department - php

Question

Here is my code
<div class="form-group">
<label for="salary" class="control-label">Department:*
</label>
<select class="form-control" id="selDepartment"
name="selDepartment" autofocus="autofocus">
<option value="-1" onmouseout="" ="">Select
Department</option>
<?php
$query="SELECT * FROM department_master";
$results=mysqli_query($con,$query);
foreach ($results as $dm_department) {
?>
<option value="<?php echo $dm_department["dm_department"];?>";?>
<?php echo $a=$dm_department["dm_department"];?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="salary" class="control-label">Designation:*
</label>
<select class="form-control" id="selDesignation"
name="selDesignation" autofocus="autofocus">
<option value="-1" onmouseout="" ="">Select
Designation</option>
<?php
$query="SELECT * FROM designation_master";
$results=mysqli_query($con,$query);
foreach ($results as $dm_designation) {
?>
<option value="<?php echo $dm_designation["dm_designation"];?>";?>
<?php echo $dm_designation["dm_designation"];?></option>
<?php
}
?>
</select>
</div>
How to select only particular designations from the department and here is my code.

Answer 1

Please include JS library before script
<select class="form-control" id="selDepartment" name="selDepartment" autofocus="autofocus" onchange='xyz(this.value)'>
<script>
function xyz(temp){
$.ajax({
type:'post',
url: "abc.php",
data: "department="+temp
success: function(result){
$("#selDesignation").html(result);
}});
</script>
In abc.php
$department=$_POST['department'];
$html="<option value="-1" onmouseout="" ="">Select
Designation</option>";
$query="SELECT * FROM designation_master where department=$department";
$results=mysqli_query($con,$query);
foreach ($results as $dm_designation) {
$html=$html+" <option value=$dm_designation['dm_designation']> $dm_designation['dm_designation']</option>';
}
echo $html;