Jak zobrazit druhý rozevírací seznam na základě předchozí hodnoty rozevíracího seznamu pomocí JavaScriptu

Za prvé, máte duplicitní id hodnotu ve vašem HTML. Předpokládám, že div by neměl mít bir ale biro jako id hodnota atributu.

Poté můžete přidat data-dept na option prvky, které dynamicky přidáte do druhé rozbalovací nabídky, a přiřadíte jim hodnotu deptId :

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

Poté ve skriptu načtěte tuto hodnotu pomocí dataset.dept (ujistěte se, že jste opravili id prvku div atribut v HTML).

Zde je úryvek (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>