How to show a second dropdown based on previous dr

Question

I'm trying to get the second dropdown value based on the first dropdown value using JavaScript.

At first, the second dropdown is in hidden mode and activated by choosing the first dropdown and then the second value is out by just showing data based on the first dropdown selected value.

• Depts has deptId as primary key.
• Bir has deptId as foreign key.

I'm trying to get Bir items where deptId == selectedItem on Depts.

How can I make this work?

Here's my view :

<div class="row">
    <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>
                <?php
                if(!empty($Depts))
                {
                    foreach ($Depts as $rl)
                    {
                        ?>
                        <option value="<?php echo $rl->deptId ?>"><?php echo $rl->deptName?></option>
                        <?php
                    }
                }
                ?>
            </select>
        </div>
    </div>  
    <div class="col-md-6" >
        <div class="form-group" id="bir" 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>
                <?php
                if(!empty($birs))
                {
                    foreach ($birs as $rl)
                    {
                        ?>
                        <option value="<?php echo $rl->birId ?>"><?php echo $rl->birName ?></option>
                        <?php
                    }
                }
                ?>
            </select>
        </div>
    </div>  
</div>

Here's my JavaScript :

function checkvalue(val)
{ 
    if(val != 0)
    { 
        document.getElementById('biro').style.display ='block'; 
    } 
}

Answer 1

First of all, you have a duplicate id value in your HTML. I assume the div should not have bir but biro as id attribute value.

You could then add a data-dept to the option elements that you add dynamically to the second drop down, and give it the value of the deptId:

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

Then in the script, read out that value with dataset.dept (make sure you have corrected the div's id attribute in the HTML).

Here is a snippet (without 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>