根據所選選項顯示輸入字段

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)