Cách hiển thị danh sách thả xuống thứ hai dựa trên giá trị thả xuống trước đó bằng cách sử dụng Javascript

Trước hết, bạn có một id trùng lặp giá trị trong HTML của bạn. Tôi giả sử div không nên có bir nhưng biro dưới dạng id giá trị thuộc tính.

Sau đó, bạn có thể thêm data-dept vào tùy chọn option các phần tử mà bạn thêm động vào menu thả xuống thứ hai và cung cấp cho nó giá trị của deptId :

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

Sau đó, trong tập lệnh, hãy đọc giá trị đó bằng dataset.dept (đảm bảo rằng bạn đã sửa id của div trong HTML).

Đây là một đoạn mã (không có 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>