通过JS隐藏html中的show toggle字段

Question

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

当我点击ONLINE测试链接时，应显示上传指南并隐藏Venue。当我点击Written时，Venue应该出现并测试链接＆amp;应隐藏指南链接。我试过显示隐藏的切换方法可以有人帮我这个。

Answer 1

你可以做的是将你的在线代码部分放在一个div中，让我们说id为在线和离线部分，在id为离线的div中。

在开始时不保留任何内容，然后选择在线时显示隐藏离线的在线div以及选择离线时显示离线并隐藏在线部分。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="testType" name="age" class="form-control">
                        <option value='' selected disabled> - Select - </option>
                        <option value="14">Online</option>            
                        <option value="13">Written</option>                                 
                    </select>
                </div>
            </div>
        </div>
        <div class="control-group" id="offline" 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 id="online" style="display:none;">
        <div class="control-group" 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" 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>  
        </div>
</form>
<script>
$(document).ready(function () {
    $("#testType").change(function () {
        toggleFields();
    });

});
function toggleFields() {
    if ($("#testType").val() == 14)
    {
        $("#offline").hide();
        $("#online").show();
    }
    else
    {
        $("#online").hide();
        $("#offline").show();
    }
}
</script>

＆＃13;

＆＃13;

＆＃13;

一个更简单的例子可以是：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="testType">
<option value = "" selected disabled>Select mode</option>
<option value = "online">Online</option>
<option value = "offline">Offline</option>
</select>
<hr/>
<br/>
<div id="online" style="display:none;">I am online part</div>
<br/>
<div id="offline" style="display:none;">I am offline part</div>
<br/>



<script>
$(document).ready(function () {
    $("#testType").change(function () {
        toggleFields();
    });

});
function toggleFields() {
    if ($("#testType").val() == "online")
    {
        $("#offline").hide();
        $("#online").show();
    }
    else
    {
        $("#online").hide();
        $("#offline").show();
    }
}
</script>

＆＃13;

＆＃13;

＆＃13;

<强>更新

正如@Scott Marcus所建议你可以简单地将回调函数设置为：

$("#testType").change(toggleFields);

并且不需要将其包装为匿名函数。

这将是一种更有效的方法。

＆＃13;

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <select id="testType">
    <option value = "" selected disabled>Select mode</option>
    <option value = "online">Online</option>
    <option value = "offline">Offline</option>
    </select>
    <hr/>
    <br/>
    <div id="online" style="display:none;">I am online part</div>
    <br/>
    <div id="offline" style="display:none;">I am offline part</div>
    <br/>



    <script>
    $(document).ready(function () {
        $("#testType").change(toggleFields);
    });
    function toggleFields() {
        if ($("#testType").val() == "online")
        {
            $("#offline").hide();
            $("#online").show();
        }
        else
        {
            $("#online").hide();
            $("#offline").show();
        }
    }
    </script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

我在这里所做的只是将group2和toggleFields类添加到两个不同的部分，然后相应地显示和隐藏它们。最初（通过CSS），两个部分都被设置为隐藏。

此外，在连接toggleFields事件处理程序时，您的代码将调用包装在匿名函数中，这是不必要的。您也可以在文档准备就绪后立即调用$(function () { $("#age").on("change", toggleFields); }); function toggleFields() { switch (parseInt($("#age").val())) { case 13: $(".group1").show(); $(".group2").hide(); break; case 14: $(".group2").show(); $(".group1").hide(); break; } }，这也是不需要的，因为默认情况下将隐藏所有字段。

.group1, .group2 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 group1" id="parentPermission">
            <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 group2" id="Permission">
            <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 group2" 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>

bind