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

Posted 2023-03-23

【中文标题】根据所选选项显示输入字段

【英文标题】：Display input field based on selected option

【发布时间】：2018-04-18 07:37:02

【问题描述】：

我正在尝试根据所选的特定选项显示和隐藏某些值。从数据库中检索选项。但我无法让它与下面的代码一起使用。你能帮我找出我哪里出错了吗？我想尝试让这段代码正常工作。

Here is the picture of what I have been working on. What I would like to do is, when I select the leave type (Eg: Annual leave), the red A box will show and hide the blue B box & when I select Time Off leave type, the blue B box will show and red A box will hide

这是我当前的代码：

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

【参考方案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)