基于下拉选择的页面中 hiding/showing HTML 元素的处理

Question

首先，在 HTML 方面，我是一个真正的菜鸟，但我一直在研究 Azure，并开始使用 ASP.NET MVC 制作项目。在整个过程中，我发现需要 hide/show 页面中的不同元素，基于同一页面中的下拉选择。我用 Google 搜索了解决方案，但似乎没有满足我需求的东西。

基本上逻辑是这样的：

根据 PetAmount 下拉选项，如果您没有宠物，则不会显示任何宠物物品。如果您有 1 只宠物 - 那么 1 只宠物展的物品。如果您有 2 只宠物 - 则显示 2 只宠物的物品。如果您有 3 只宠物 - 那么显示 3 只宠物的物品。如果您有 4 只宠物 - 那么显示 4 只宠物的物品。

我确实发现的一件事是，您必须识别 DIV 区域才能使某些解决方案起作用，但是，如前所述，我对此一窍不通。请问是否有人愿意帮助我解决这个问题？也许是一个循序渐进的过程，或者甚至是一个展示这是如何一步步完成的视频？

以下是页面代码的摘录：

<h1>Register your pet</h1>

<h5>This needs to be completed whether or not you have a pet.</h5>
<h5>If you do not have a pet, simply select the number "0" in the amount of pets selection.</h5>
<hr />
<div class="row">
    <div class="col-md-4">
         <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="main-area">
                <div id="UnitNo" class="main-area">
                    <label>Unit Number</label>
    @*                <label asp-for="UnitNo" class="control-label"></label>
    *@                <input asp-for="UnitNo" class="form-control" />
                    <span asp-validation-for="UnitNo" class="text-danger"></span>
                </div>
                <div id="OwnerShipStatus" class="main-area">
                    <label>Tenant or Owner</label>
    @*                <label asp-for="OwnerShipStatus" class="control-label"></label>
    *@                <input asp-for="OwnerShipStatus" class="form-control" />
                    <span asp-validation-for="OwnerShipStatus" class="text-danger"></span>
                </div>
                <div id="PetAmount" class="main-area">
                    <label>How many pets are you registering?</label>
    @*                <label asp-for="PetAmount" class="control-label"></label>
    *@               @* <input asp-for="PetAmount" class="form-control" />*@
                   <fieldset><select id="PetAmount" name="PetAmount">
                       <option selected="selected" value="0">0</option>
                       <option value="1">1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       </select>
                      @* <p><input type="submit" value="Submit" /> </p>*@
                       </fieldset>
                           <span asp-validation-for="PetAmount" 
                </div>
            </div class="main-area">
            <div class="Pet1-Group">
            <div id="Pet1Name" class="Pet1-group" style="display: none:">
                <label>What is your pets name?</label>
@*                <label asp-for="Pet1Name" class="control-label"></label>
*@                <input asp-for="Pet1Name" class="form-control" />
                <span asp-validation-for="Pet1Name" class="text-danger"></span>
            </div>
            <div id="Pet1Type" class="Pet1-group" style="display: none;">
                <label>What type of pet is it?</label>
@*                <label asp-for="Pet1Type" class="control-label"></label>
*@                <input asp-for="Pet1Type" class="form-control" />
                <span asp-validation-for="Pet1Type" class="text-danger"></span>
            </div>
            <div id="Pet1Sex" class="Pet1-group" style="display: none;">
                <label>What is the gender of your pet?</label>
@*                <label asp-for="Pet1Sex" class="control-label"></label>
                <input asp-for="Pet1Sex" class="form-control" />
*@                 <fieldset><select id="Pet1Sex" name="Pet1Sex">
                   <option selected="selected" value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="N/A">N/A</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet1Sex" class="text-danger"></span>
            </div>
            <div id="Pet1Desc" class="Pet1-group" style="display: none;">
                <label>Please describe your pet</label>
@*                <label asp-for="Pet1Desc" class="control-label"></label>
*@                <input asp-for="Pet1Desc" class="form-control" />
                <span asp-validation-for="Pet1Desc" class="text-danger"></span>
            </div>
            <div id="Pet1Chip" class="Pet1-group" style="display: none;">
                <label>Has your pet been Microchipped?</label>
@*                <label asp-for="Pet1Chip" class="control-label"></label>
                  <input asp-for="Pet1Chip" class="form-control" />
*@                 <fieldset><select id="Pet1Chip" name="Pet1Chip">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet1Chip" class="text-danger"></span>
            </div>
            <div id="Pet1ChipImage" class="Pet1-group" style="display: none;">
                <label>Please upload a picture of the microchipping form for your pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet1ChipImage" class="control-label"></label>
*@                <input asp-for="Pet1ChipImage" class="form-control" />
                <span asp-validation-for="Pet1ChipImage" class="text-danger"></span>
            </div>
            <div id="Pet1Sterile" class="Pet1-group" style="display: none;">
                <label>Has your pet been sterilized?</label>
@*                <label asp-for="Pet1Sterile" class="control-label"></label>
                <input asp-for="Pet1Sterile" class="form-control" />
*@                 <fieldset><select id="Pet1Sterile" name="Pet1Sterile">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet1Sterile" class="text-danger"></span>
            </div>
            <div id="Pet1SterileImage" class="Pet1-group" style="display: none;">
                <label>Please upload a picture of the sterilization form for your pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet1SterileImage" class="control-label"></label>
*@                <input asp-for="Pet1SterileImage" class="form-control" />
                <span asp-validation-for="Pet1SterileImage" class="text-danger"></span>
            </div>
            <div id="Pet1Status" class="Pet1-group" style="display: none;">
                <label>What is the status of this pet?</label>
@*                <label asp-for="Pet1Status" class="control-label"></label>
*@                <input asp-for="Pet1Status" class="form-control" />
                <span asp-validation-for="Pet1Status" class="text-danger"></span>
            </div>
            <div id="Pet1Additional" class="Pet1-group" style="display: none;">
                <label>Would you like to add any more detail regarding this pet application?</label>
@*                <label asp-for="Pet1Additional" class="control-label"></label>
*@                <input asp-for="Pet1Additional" class="form-control" />
                <span asp-validation-for="Pet1Additional" class="text-danger"></span>
            </div>
            <div id="Pet1Image" class="Pet1-group" style="display: none;">
                <label>Please upload a picture of your pet (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet1Image" class="control-label"></label>
*@                <input asp-for="Pet1Image" class="form-control" />
                <span asp-validation-for="Pet1Image" class="text-danger"></span>
            </div>
            </div class="Pet1-group">
            <div class="Pet2-group">
            <div id="Pet2Name" class="Pet2-group" style="display: none;">
                <label>What is your 2nd pets name?</label>
@*                <label asp-for="Pet2Name" class="control-label"></label>
*@                <input asp-for="Pet2Name" class="form-control" />
                <span asp-validation-for="Pet2Name" class="text-danger"></span>
            </div>
            <div id="Pet2Type" class="Pet2-group" style="display: none;">
                <label>What type of pet is it?</label>
@*                <label asp-for="Pet2Type" class="control-label"></label>
*@                <input asp-for="Pet2Type" class="form-control" />
                <span asp-validation-for="Pet2Type" class="text-danger"></span>
            </div>
            <div id="Pet2Sex" class="Pet2-group" style="display: none;">
                <label>What is the gender of your 2nd pet?</label>
@*                <label asp-for="Pet2Sex" class="control-label"></label>
               <input asp-for="Pet2Sex" class="form-control" />
*@                 <fieldset><select id="Pet2Sex" name="Pet2Sex">
                   <option selected="selected" value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="N/A">N/A</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet2Sex" class="text-danger"></span>
            </div>
            <div id="Pet2Desc" class="Pet2-group" style="display: none;">
                <label>Please describe your 2nd pet</label>
@*                <label asp-for="Pet2Desc" class="control-label"></label>
*@                <input asp-for="Pet2Desc" class="form-control" />
                <span asp-validation-for="Pet2Desc" class="text-danger"></span>
            </div>
            <div id="Pet2Chip" class="Pet2-group" style="display: none;">
                <label>Has your 2nd pet been Microchipped?</label>
@*                <label asp-for="Pet2Chip" class="control-label"></label>
                <input asp-for="Pet2Chip" class="form-control" />
*@                 <fieldset><select id="Pet2Chip" name="Pet2Chip">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet2Chip" class="text-danger"></span>
            </div>
            <div id="Pet2ChipImage" class="Pet2-group" style="display: none;">
                <label>Please upload a picture of the microchipping form for your 2nd pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet2ChipImage" class="control-label"></label>
*@                <input asp-for="Pet2ChipImage" class="form-control" />
                <span asp-validation-for="Pet2ChipImage" class="text-danger"></span>
            </div>
            <div id="Pet2Sterile" class="Pet2-group" style="display: none;">
                <label>Has your 2nd pet been sterilized?</label>
@*                <label asp-for="Pet2Sterile" class="control-label"></label>
                <input asp-for="Pet2Sterile" class="form-control" />
*@                 <fieldset><select id="Pet2Sterile" name="Pet2Sterile">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet2Sterile" class="text-danger"></span>
            </div>
            <div id="Pet2SterileImage" class="Pet2-group" style="display: none;">
                <label>Please upload a picture of the sterilization form for your 2nd pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet2SterileImage" class="control-label"></label>
*@                <input asp-for="Pet2SterileImage" class="form-control" />
                <span asp-validation-for="Pet2SterileImage" class="text-danger"></span>
            </div>
            <div id="Pet2Additional" class="Pet2-group" style="display: none;">
                 <label>Would you like to add any more detail regarding this your 2nd application?</label>
@*                <label asp-for="Pet2Additional" class="control-label"></label>
*@                <input asp-for="Pet2Additional" class="form-control" />
                <span asp-validation-for="Pet2Additional" class="text-danger"></span>
            </div>
            <div id="Pet2Status" class="Pet2-group" style="display: none;">
                <label>What is the status of your 2nd pet?</label>
@*                <label asp-for="Pet2Status" class="control-label"></label>
*@                <input asp-for="Pet2Status" class="form-control" />
                <span asp-validation-for="Pet2Status" class="text-danger"></span>
            </div>
            <div id="Pet2Image" class="Pet2-group" style="display: none;">
                <label>Please upload a picture of your 2nd pet (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet2Image" class="control-label"></label>
*@                <input asp-for="Pet2Image" class="form-control" />
                <span asp-validation-for="Pet2Image" class="text-danger"></span>
            </div>
            </div class="Pet2-group">
            <div class="Pet3-group">
            <div id="Pet3Name" class="Pet3-group" style="display: none;">
                <label>What is your 3rd pets name?</label>
@*                <label asp-for="Pet3Name" class="control-label"></label>
*@                <input asp-for="Pet3Name" class="form-control" />
                <span asp-validation-for="Pet3Name" class="text-danger"></span>
            </div>
            <div id="Pet3Type" class="Pet3-group" style="display: none;">
                <label>What type of pet is it?</label>
@*                <label asp-for="Pet3Type" class="control-label"></label>
*@                <input asp-for="Pet3Type" class="form-control" />
                <span asp-validation-for="Pet3Type" class="text-danger"></span>
            </div>
            <div id="Pet3Sex" class="Pet3-group" style="display: none;">
                <label>What is the gender of your 3rd pet?</label>
@*                <label asp-for="Pet3Sex" class="control-label"></label>
                <input asp-for="Pet3Sex" class="form-control" />
*@                 <fieldset><select id="Pet3Sex" name="Pet3Sex">
                   <option selected="selected" value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="N/A">N/A</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet3Sex" class="text-danger"></span>
            </div>
            <div id="Pet3Desc" class="Pet3-group" style="display: none;">
                <label>Please describe your 3rd pet</label>
@*                <label asp-for="Pet3Desc" class="control-label"></label>
*@                <input asp-for="Pet3Desc" class="form-control" />
                <span asp-validation-for="Pet3Desc" class="text-danger"></span>
            </div>
            <div id="Pet3Chip" class="Pet3-group" style="display: none;">
                <label>Has your 3rd pet been Microchipped?</label>
@*                <label asp-for="Pet3Chip" class="control-label"></label>
                <input asp-for="Pet3Chip" class="form-control" />
*@                 <fieldset><select id="Pet3Chip" name="Pet3Chip">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet3Chip" class="text-danger"></span>
            </div>
            <div id="Pet3ChipImage" class="Pet3-group" style="display: none;">
                <label>Please upload a picture of the microchipping form for your 3rd pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet3ChipImage" class="control-label"></label>
*@                <input asp-for="Pet3ChipImage" class="form-control" />
                <span asp-validation-for="Pet3ChipImage" class="text-danger"></span>
            </div>
            <div id="Pet3Sterile" class="Pet3-group" style="display: none;">
                <label>Has your 3rd pet been sterilized?</label>
@*                <label asp-for="Pet3Sterile" class="control-label"></label>
                <input asp-for="Pet3Sterile" class="form-control" />
*@                 <fieldset><select id="Pet3Sterile" name="Pet3Sterile">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet3Sterile" class="text-danger"></span>
            </div>
            <div id="Pet3SterileImage" class="Pet3-group" style="display: none;">
                <label>Please upload a picture of the sterilization form for your 3rd pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet3SterileImage" class="control-label"></label>
*@                <input asp-for="Pet3SterileImage" class="form-control" />
                <span asp-validation-for="Pet3SterileImage" class="text-danger"></span>
            </div>
            <div id="Pet3Additional" class="Pet3-group" style="display: none;">
                <label>Would you like to add any more detail regarding your 3rd pet application?</label>
@*                <label asp-for="Pet3Additional" class="control-label"></label>
*@                <input asp-for="Pet3Additional" class="form-control" />
                <span asp-validation-for="Pet3Additional" class="text-danger"></span>
            </div>
            <div id="Pet3Status" class="Pet3-group" style="display: none;">
                 <label>What is the status of your 3rd pet?</label>
@*                <label asp-for="Pet3Status" class="control-label"></label>
*@                <input asp-for="Pet3Status" class="form-control" />
                <span asp-validation-for="Pet3Status" class="text-danger"></span>
            </div>
            <div id="Pet3Image" class="Pet3-group" style="display: none;">
                <label>Please upload a picture of your 3rd pet (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet3Image" class="control-label"></label>
*@                <input asp-for="Pet3Image" class="form-control" />
                <span asp-validation-for="Pet3Image" class="text-danger"></span>
            </div>
            </div class="Pet3-group">
            <div class="Pet4-group">
            <div id="Pet4Name" class="Pet4-group" style="display: none;">
                <label>What is your 4th pets name?</label>
@*                <label asp-for="Pet4Name" class="control-label"></label>
*@                <input asp-for="Pet4Name" class="form-control" />
                <span asp-validation-for="Pet4Name" class="text-danger"></span>
            </div>
            <div id="Pet4Type" class="Pet4-group" style="display: none;">
                <label>What type of pet is it?</label>
@*                <label asp-for="Pet4Type" class="control-label"></label>
*@                <input asp-for="Pet4Type" class="form-control" />
                <span asp-validation-for="Pet4Type" class="text-danger"></span>
            </div>
            <div id="Pet4Sex" class="Pet4-group" style="display: none;">
                <label>What is the gender of your 4th pet?</label>
@*                <label asp-for="Pet4Sex" class="control-label"></label>
                <input asp-for="Pet4Sex" class="form-control" />
*@                 <fieldset><select id="Pet4Sex" name="Pet4Sex">
                   <option selected="selected" value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="N/A">N/A</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet4Sex" class="text-danger"></span>
            </div>
            <div id="Pet4Desc" class="Pet4-group" style="display: none;">
                <label>Please describe your 4th pet</label>
@*                <label asp-for="Pet4Desc" class="control-label"></label>
*@                <input asp-for="Pet4Desc" class="form-control" />
                <span asp-validation-for="Pet4Desc" class="text-danger"></span>
            </div>
            <div id="Pet4Chip" class="Pet4-group" style="display: none;">
                <label>Has your 4th pet been Microchipped?</label>
@*                <label asp-for="Pet4Chip" class="control-label"></label>
                <input asp-for="Pet4Chip" class="form-control" />
*@                 <fieldset><select id="Pet4Chip" name="Pet4Chip">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet4Chip" class="text-danger"></span>
            </div>
            <div id="Pet4ChipImage" class="Pet4-group" style="display: none;">
                <label>Please upload a picture of the microchipping form for your 4th pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet4ChipImage" class="control-label"></label>
*@                <input asp-for="Pet4ChipImage" class="form-control" />
                <span asp-validation-for="Pet4ChipImage" class="text-danger"></span>
            </div>
            <div id="Pet4Sterile" class="Pet4-group" style="display: none;">
                <label>Has your 4th pet been sterilized?</label>
@*                <label asp-for="Pet4Sterile" class="control-label"></label>
                <input asp-for="Pet4Sterile" class="form-control" />
*@                 <fieldset><select id="Pet4Sterile" name="Pet4Sterile">
                   <option selected="selected" value="Yes">Yes</option>
                   <option value="No">No</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="Pet4Sterile" class="text-danger"></span>
            </div>
            <div id="Pet4SterileImage" class="Pet4-group" style="display: none;">
                <label>Please upload a picture of the sterilization form for your 4th pet. (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet4SterileImage" class="control-label"></label>
*@                <input asp-for="Pet4SterileImage" class="form-control" />
                <span asp-validation-for="Pet4SterileImage" class="text-danger"></span>
            </div>
            <div id="Pet4Additional" class="Pet4-group" style="display: none;">
                 <label>Would you like to add any more detail regarding your 4th pet application?</label>
@*                <label asp-for="Pet4Additional" class="control-label"></label>
*@                <input asp-for="Pet4Additional" class="form-control" />
                <span asp-validation-for="Pet4Additional" class="text-danger"></span>
            </div>
            <div id="Pet4Status" class="Pet4-group" style="display: none;">
                <label>What is the status of your 4th pet?</label>
@*                <label asp-for="Pet4Status" class="control-label"></label>
*@                <input asp-for="Pet4Status" class="form-control" />
                <span asp-validation-for="Pet4Status" class="text-danger"></span>
            </div>
            <div id="Pet4Image" class="Pet4-group" style="display: none;">
                <label>Please upload a picture of your 4th pet (Photos from phone camera are accepted)</label>
@*                <label asp-for="Pet4Image" class="control-label"></label>
*@                <input asp-for="Pet4Image" class="form-control" />
                <span asp-validation-for="Pet4Image" class="text-danger"></span>
            </div>
            </div class="Pet4-Group">
            <div class="Other">
            <div id="ApplicationDate" class="Other">
                <label>Date of application</label>
@*                <label asp-for="ApplicationDate" class="control-label"></label>
*@                <input asp-for="ApplicationDate" class="form-control" />
                <span asp-validation-for="ApplicationDate" class="text-danger"></span>
            </div>
            <div id="ApplicationSigned" class="Other">
                <label>Do you accept the terms and conditions?</label>
@*                <label asp-for="ApplicationSigned" class="control-label"></label>
                  <input asp-for="ApplicationSigned" class="form-control" />
*@                 <fieldset><select id="TrusteeAppStatus" name="TrusteeAppStatus">
                   <option selected="selected" value="No">No</option>
                   <option value="Yes">Yes</option>
                   </select>
                   </fieldset>
                <span asp-validation-for="ApplicationSigned" class="text-danger"></span>
            </div>
            <div id="TrusteeAppStatus" class="Other" style="display: none;">
                <label>Is the applciation accepted by the Trustees?</label>
@*                <label asp-for="TrusteeAppStatus" class="control-label"></label>
*@                <input asp-for="TrusteeAppStatus" class="form-control" />
                <span asp-validation-for="TrusteeAppStatus" class="text-danger"></span>
            </div>
            <div>
                <label></label>
            </div>
            </div class="Other">
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

提前致谢。

Answer 1

请参考以下代码：

$('select').on('change', function() {
    var selected = this.value ;

    switch(selected) {
        case 1:
            $(.Pet1-group).show();
            break;
        case 2:
            $(.Pet2-group).show();
            break;
        case 3:
            $(.Pet3-group).show();
            break;
        case 4:
            $(.Pet4-group).show();
            break;
    }
});

您可以为每个 pet-group 添加一个额外的 class 以隐藏其他人。

Answer 2

更新：

在我将脚本添加到 site.js 文件中并稍微调整脚本后，我成功地获得了我想要的结果。

$(document).ready(function () {
    $('#PetAmount').on('change', function () {
        var selected = this.value;
        switch (selected) {
            case "0":
                $('#Pet1-group').hide();
                $('#Pet2-group').hide();
                $('#Pet3-group').hide();
                $('#Pet4-group').hide();
                break;
            case "1":
                $('#Pet1-group').show();
                $('#Pet2-group').hide();
                $('#Pet3-group').hide();
                $('#Pet4-group').hide();
                break;
            case "2":
                $('#Pet1-group').show();
                $('#Pet2-group').show();
                $('#Pet3-group').hide();
                $('#Pet4-group').hide();
                break;
            case "3":
                $('#Pet1-group').show();
                $('#Pet2-group').show();
                $('#Pet3-group').show();
                $('#Pet4-group').hide();
                break;
            case "4":
                $('#Pet1-group').show();
                $('#Pet2-group').show();
                $('#Pet3-group').show();
                $('#Pet4-group').show();
                break;
        }
    });

基于下拉选择的页面中 hiding/showing HTML 元素的处理

Process for hiding/showing HTML elements in page based on dropdown selection

html

asp.net-mvc

jquery