根据所选选项显示输入字段

Question

我试图根据所选的特定选项显示和隐藏某些值。 这些选项是从数据库中检索的。 但是我无法在下面的代码中使用它。 您能帮我找出问题所在吗？ 我想尝试使此代码正常工作。

这是我一直在努力的图片。 我想做的是，当我选择休假类型（例如：年假）时，红色的A框将显示并隐藏蓝色的B框；当我选择“休假”休假类型时，蓝色的B框将显示而红色一个盒子会藏起来

这是我当前的代码：

 <script> function updateValue(value) { document.getElementById('ID').value = value } // set a defalt value updateValue(document.getElementById('leavetype').value) </script> 

 <?php $sql="SELECT * FROM leave_balance WHERE passcodeEmp='$passcodeEmp'"; $result1= mysqli_query($connect, $sql); ?> <div class="form-group"> <label class="col-sm-2 control-label">Leave Type</label> <div class="col-sm-8"> <select id="leavetype" class="form-control" name="balanceID" onchange="updateValue(this.value)" required/> <option selected disabled>Select Leave Type</option> <?php while($row1 = mysqli_fetch_array($result1)){ $balanceID = $row1['balanceID']; $leaveName = $row1['leaveName'];?> <option value="<?php echo $balanceID?>"><?php echo $leaveName;?></option><br> <?php }?> </select> </div> </div> 

此代码用于显示红色的A框

 <div class="form-group"> <label class="col-sm-2 control-label">From Date</label> <div class="col-sm-3"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-calendar"></i> </div><input type="date" class="form-control" id="datepicker" name="fromDate" required/ > </div> </div> <label class="col-sm-2 control-label">To </label> <div class="col-sm-3"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-calendar"></i> </div><input type="date" class="form-control" id="datepicker" name="endDate" required/ > </div> </div> </div> 

Answer 1

尝试这个

function updateValue(value)
{
    var selectedOption = document.querySelector('option[value="'+value+'"]').text;
    if(selectedOption == 'Time Off'){
        // show (blue B box) and hide (red A box)
    }else{
        // show (red A box) and hide (blue B box)
    }
}

// set a defalt value
updateValue(document.getElementById('leavetype').value)