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

Posted 2023-02-24

【中文标题】如何使用Javascript根据先前的下拉值显示第二个下拉列表

【英文标题】：How to show a second dropdown based on previous dropdown value using Javascript

【发布时间】：2018-01-27 21:32:36

【问题描述】：

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

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

Depts 将 deptId 作为主键。 Bir 已将 deptId 作为外键。

我正在尝试在部门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'; 
     

【问题讨论】：

您的问题没有显示有关第二个下拉列表中的项目如何与部门 ID 相关的任何信息

更新了我的问题，希望对您有所帮助

数据在 mysql 数据库中

你检查答案了吗？

【参考方案1】：

首先，您的 html 中有一个重复的 id 值。我假设div 不应该有bir，而是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 属性）。

这是一个 sn-p（没有 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>