如何使用Javascript根据先前的下拉值显示第二个下拉菜单

Question

我正在尝试使用JavaScript根据第一个下拉值获取第二个下拉值。

首先，第二个下拉菜单处于隐藏模式，并通过选择第一个下拉菜单来激活，然后通过仅显示基于第一个下拉选择值的数据来输出第二个值。

• 部门以deptId作为主键。
• Bir将deptId作为外键。

我正在尝试获取deptId == selectedItem上deptId == selectedItem Bir项目。

我该如何进行这项工作？

这是我的看法：

<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>

这是我的JavaScript：

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

Answer 1

首先，您的HTML中有一个重复的id值。 我假设div不应将bir用作id属性值，而应将biro作为id属性值。

然后，您可以将data-dept添加到您动态添加到第二个下拉列表的option元素中，并为其指定deptId的值：

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

然后在脚本中，使用dataset.dept读取该值（确保已更正HTML中的div的id属性）。

这是一个代码段（没有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>