如何使用Javascript根据先前的下拉值显示第二个下拉菜单 [英] How to show a second dropdown based on previous dropdown value using Javascript

问题描述

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

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.

• 部门以deptId作为主键.
• 伯尔以deptId作为外键.

我正在尝试获取部门中deptId == selectedItem的Bir项目.

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

我该如何进行这项工作?

How can I make this work?

这是我的观点:

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

Here's my JavaScript :

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

推荐答案

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

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.

然后可以在要动态添加到第二个下拉列表的option元素中添加data-dept，并为其赋予deptId的值:

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
}

然后在脚本中，用dataset.dept读出该值(确保已更正HTML中div的id属性).

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

这是一个代码段(没有PHP):

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>  

这篇关于如何使用Javascript根据先前的下拉值显示第二个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！