Javascript 通过JS在html中隐藏显示切换字段 测试模式： -选择- 在线 的 书面的 地点: 测试链接： 上传指南文档和说明信息： $（文档）.ready（函数（）{ 切换字段（）； $（“#年龄”）。更改（函数（）{ 切换字段（）； }); }); 函数toggleFields（）{ 如果（$（“#age”）.val（）

您需要显示和隐藏正确的部分，而不仅仅是隐藏。此外，您有多个元素的

id

为

权限

，这是不正确的

我在这里所做的只是将

group1

和

group2

类添加到两个不同的部分，然后相应地显示和隐藏它们

此外，在连接

toggleFields

事件处理程序时，您的代码将调用包装在匿名函数中，这是不必要的。文档准备好后，您也将调用

toggleFields

，这也是不必要的，因为默认情况下所有字段都将隐藏

$（函数（）{
$（“#年龄”）。打开（“更改”，切换字段）；
});
函数toggleFields（）{
开关（parseInt（$（“#age”）.val（））{
案例13：
$（“.group1”）.show（）；
$（“.group2”）.hide（）；
打破
案例14：
$（“.group2”）.show（）；
$（“.group1”）.hide（）；
打破
}
}

.group1、.group2{display:none；}

测试模式：
-选择-
在线 的
书面的
地点:
测试链接：
上传指南文档和说明信息：

您可以做的是将代码的联机部分放在一个div中，让我们假设id为online，脱机部分放在id为offline的div中

在开始时不选择任何内容，然后在选择联机时显示联机div，同时隐藏脱机部分；在选择脱机时显示脱机部分并隐藏联机部分

测试模式：
-选择-
在线 的
书面的
地点:
测试链接：
上传指南文档和说明信息：
$（文档）.ready（函数（）{
$（“#testType”）.change（函数（）{
切换字段（）；
});
});
函数toggleFields（）{
if（$（“#testType”）.val（）==14）
{
$（“#脱机”）.hide（）；
$（“#在线”）.show（）；
}
其他的
{
$（“#在线”）.hide（）；
$（“#脱机”）.show（）；
}
}

无需换行

toggleFields（）

在一个匿名函数中，该函数正被注册为下拉列表中

更改

事件的回调函数。另外，为

if

设置基本的

else

条件也不是一个好主意，因为这将不能很好地扩展。谢谢@ScottMarcus这是一个好且有效的建议。

<form>
    <div class="col-lg-3">
        <div class="control-group">
            <label class="control-label" for="select01">Mode of Test:</label>
                <div class="controls">
                    <select id="age" name="age" class="form-control">
                        <option value=''> - Select - </option>
                        <option value="14">Online</option>            
                        <option value="13">Written</option>                                 
                    </select>
                </div>
            </div>
        </div>
        <div class="control-group" id="parentPermission" style="display: none">
            <label class="control-label" for="organization" >Venue :</label>
            <div class="controls">
                <input type="text" class="form-control input-xlarge" id="txtPassportNumber" name="parent_name">                  
            </div>
        </div>                              
        <div class="control-group" id="Permission" style="">
            <label class="control-label" for="organization">Test Link :</label>
            <div class="controls">
                <input type="text" class="form-control input-xlarge" id="organization" name="organization">                  
            </div>
        </div>  
        <div class="control-group" id="Permission" style="">
            <label class="control-label" for="organization">Upload Guide Line Document & Instruction Message :</label>
            <div class="controls">
                <input type="text" class="form-control input-xlarge" id="organization" name="organization">  
                <input type="file" name="img" multiple>
            </div>
        </div>  
</form>
<script>
$(document).ready(function () {
    toggleFields(); 
    $("#age").change(function () {
        toggleFields();
    });

});
function toggleFields() {
    if ($("#age").val() <= 13)
        $("#parentPermission").show();
    else
        $("#parentPermission").hide();
}
</script>