javascript - 如果我在 php prep 语句的下拉框中选择某个选项，如何显示文本框？

Question

我们需要为位置下拉列表使用 PHP 准备好的语句，我的问题是如果选择了医生，如何显示/隐藏文本框？简而言之，如果用户选择“医师”，则会出现“医师执照号码”文本框

这是代码

<?php
include_once "config.php";

$sql = "SELECT position, posID FROM position order by position";
$stmt = $con->prepare($sql);
$stmt->execute();
$stmt->bind_result($position, $pid);            
$stmt->store_result();

echo "<select name='posID' class='form-control'  required>
<option value='' default style='color:gray;'>Position</option>"; 

while ($stmt->fetch()){
echo '<option value="'.$pid.'">'.$position.'</option>';
}

echo '</select>';
?>

<div class="form-group">
<label for="physnum" class="control-label col-xs-4"><p class="left">Physician's License Number</p></label>
<div class="col-xs-7">
<input name="physnum" class="form-control " id="phys-num" maxlength=5 placeholder="License Number" />
</div>
<div class="col-xs-1">
</div>
</div>

这是到目前为止的样子

Answer 1

您可以在此处使用 jQuery 的 change 方法。

https://api.jquery.com/change/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <?php
include_once "config.php";

$sql = "SELECT position, posID FROM position order by position";
$stmt = $con->prepare($sql);
$stmt->execute();
$stmt->bind_result($position, $pid);            
$stmt->store_result();

echo "<select name='posID' id='posID' class='form-control'  required>
<option value='' default style='color:gray;'>Position</option>"; 

while ($stmt->fetch()){
echo '<option value="'.$pid.'">'.$position.'</option>';
}

echo '</select>';
?>

<div id="phys-container">
<div class="form-group">
<label for="physnum" class="control-label col-xs-4"><p class="left">Physician's License Number</p></label>
<div class="col-xs-7">
<input name="physnum" class="form-control " id="phys-num" maxlength=5 placeholder="License Number" />
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<script>
$(document).ready(function(){
    //on page load, hide the Physician's license number
    $("#phys-container").hide();
})
$("#posID").change(function(e){
    var value = $("#posID").val();
    if(value==4)
    {
        //user's a physician, show the box now
        $("#phys-container").show();
    }
    else
    {
        $("#phys-container").hide();
    }
})
</script>