Jak wyświetlić drugie menu rozwijane w oparciu o poprzednią wartość listy rozwijanej za pomocą JavaScript

Przede wszystkim masz duplikat id wartość w kodzie HTML. Zakładam div nie powinien mieć bir ale biro jako id wartość atrybutu.

Następnie możesz dodać data-dept do option elementy, które dodajesz dynamicznie do drugiego menu rozwijanego i nadaj mu wartość deptId :

foreach ($birs as $rl)
{
    ?>
    <option value="<?php echo $rl->birId ?>"
            data-dept="<?php echo $rl->deptId ?>" >
        <?php echo $rl->birName ?></option>
    <?php
}

Następnie w skrypcie odczytaj tę wartość za pomocą dataset.dept (upewnij się, że poprawiłeś id div atrybut w kodzie HTML).

Oto fragment (bez PHP):

function checkvalue(val) { 
    if (+val) { 
        for (var option of bir.options) {
            if (option.dataset.dept) { // don't touch first entry
                option.style.display = option.dataset.dept == val ? '' : 'none';
            }
        }
    }
    bir.value = 0; // reset selection
    biro.style.display = +val ? '' : 'none'; // show/hide 
}

function checkvalues(val) {}

<div class="col-md-6">
    <div class="form-group">
        <label for="Dept">Dept</label>
        <select class="form-control required" id="Dept" name="Dept" onchange='checkvalue(this.value)'>
            <option value="0">Dept</option>
            <option value="2">2</option>
            <option value="5">5</option>
        </select>
    </div>
</div>  
<div class="col-md-6" >
    <div class="form-group" id="biro" style='display:none'>
        <label for="bir">Bir</label>
        <select class="form-control required" id="bir" name="bir" onchange='checkvalues(this.value)'>
            <option value="0">Pilih Bir</option>
            <option value="9" data-dept="2">bir for 2</option>
            <option value="10" data-dept="5">bir for 5</option>
            <option value="8" data-dept="2">another bir for 2</option>
            <option value="15" data-dept="5">another bir for 5</option>
        </select>
    </div>
</div>