Firstly, I am a proper noob when it comes to HTML, but I have been studying Azure and I started making a project with ASP.NET MVC. Going through the process, I came across a need to hide/show different elements in a page, based on a dropdown selection in the same page. I have Googled solutions, but nothing seems to fit my needs.
Basically the logic is as such:
Based on the PetAmount dropdown selection, if you have no pets, no pet items show up. If you have 1 pet - then the items for 1 pet show. If you have 2 pet - then the items for 2 pets show. If you have 3 pet - then the items for 3 pets show. If you have 4 pet - then the items for 4 pets show.
The one thing I did find, is that you have to ID your DIV areas for some of the solutions to work, however, as previously stated, I am a noob to this. Please may I ask if someone would be gracious enough to assist me with this issue? Perhaps a step by step process, or even a video that shows how this is done in a step by step manor?
Below is an extract of the page code:
<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 >
<div >
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" ></div>
<div >
<div id="UnitNo" >
<label>Unit Number</label>
@* <label asp-for="UnitNo" ></label>
*@ <input asp-for="UnitNo" />
<span asp-validation-for="UnitNo" ></span>
</div>
<div id="OwnerShipStatus" >
<label>Tenant or Owner</label>
@* <label asp-for="OwnerShipStatus" ></label>
*@ <input asp-for="OwnerShipStatus" />
<span asp-validation-for="OwnerShipStatus" ></span>
</div>
<div id="PetAmount" >
<label>How many pets are you registering?</label>
@* <label asp-for="PetAmount" ></label>
*@ @* <input asp-for="PetAmount" />*@
<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 >
<div >
<div id="Pet1Name" style="display: none:">
<label>What is your pets name?</label>
@* <label asp-for="Pet1Name" ></label>
*@ <input asp-for="Pet1Name" />
<span asp-validation-for="Pet1Name" ></span>
</div>
<div id="Pet1Type" style="display: none;">
<label>What type of pet is it?</label>
@* <label asp-for="Pet1Type" ></label>
*@ <input asp-for="Pet1Type" />
<span asp-validation-for="Pet1Type" ></span>
</div>
<div id="Pet1Sex" style="display: none;">
<label>What is the gender of your pet?</label>
@* <label asp-for="Pet1Sex" ></label>
<input asp-for="Pet1Sex" />
*@ <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" ></span>
</div>
<div id="Pet1Desc" style="display: none;">
<label>Please describe your pet</label>
@* <label asp-for="Pet1Desc" ></label>
*@ <input asp-for="Pet1Desc" />
<span asp-validation-for="Pet1Desc" ></span>
</div>
<div id="Pet1Chip" style="display: none;">
<label>Has your pet been Microchipped?</label>
@* <label asp-for="Pet1Chip" ></label>
<input asp-for="Pet1Chip" />
*@ <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" ></span>
</div>
<div id="Pet1ChipImage" 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" ></label>
*@ <input asp-for="Pet1ChipImage" />
<span asp-validation-for="Pet1ChipImage" ></span>
</div>
<div id="Pet1Sterile" style="display: none;">
<label>Has your pet been sterilized?</label>
@* <label asp-for="Pet1Sterile" ></label>
<input asp-for="Pet1Sterile" />
*@ <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" ></span>
</div>
<div id="Pet1SterileImage" 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" ></label>
*@ <input asp-for="Pet1SterileImage" />
<span asp-validation-for="Pet1SterileImage" ></span>
</div>
<div id="Pet1Status" style="display: none;">
<label>What is the status of this pet?</label>
@* <label asp-for="Pet1Status" ></label>
*@ <input asp-for="Pet1Status" />
<span asp-validation-for="Pet1Status" ></span>
</div>
<div id="Pet1Additional" style="display: none;">
<label>Would you like to add any more detail regarding this pet application?</label>
@* <label asp-for="Pet1Additional" ></label>
*@ <input asp-for="Pet1Additional" />
<span asp-validation-for="Pet1Additional" ></span>
</div>
<div id="Pet1Image" style="display: none;">
<label>Please upload a picture of your pet (Photos from phone camera are accepted)</label>
@* <label asp-for="Pet1Image" ></label>
*@ <input asp-for="Pet1Image" />
<span asp-validation-for="Pet1Image" ></span>
</div>
</div >
<div >
<div id="Pet2Name" style="display: none;">
<label>What is your 2nd pets name?</label>
@* <label asp-for="Pet2Name" ></label>
*@ <input asp-for="Pet2Name" />
<span asp-validation-for="Pet2Name" ></span>
</div>
<div id="Pet2Type" style="display: none;">
<label>What type of pet is it?</label>
@* <label asp-for="Pet2Type" ></label>
*@ <input asp-for="Pet2Type" />
<span asp-validation-for="Pet2Type" ></span>
</div>
<div id="Pet2Sex" style="display: none;">
<label>What is the gender of your 2nd pet?</label>
@* <label asp-for="Pet2Sex" ></label>
<input asp-for="Pet2Sex" />
*@ <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" ></span>
</div>
<div id="Pet2Desc" style="display: none;">
<label>Please describe your 2nd pet</label>
@* <label asp-for="Pet2Desc" ></label>
*@ <input asp-for="Pet2Desc" />
<span asp-validation-for="Pet2Desc" ></span>
</div>
<div id="Pet2Chip" style="display: none;">
<label>Has your 2nd pet been Microchipped?</label>
@* <label asp-for="Pet2Chip" ></label>
<input asp-for="Pet2Chip" />
*@ <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" ></span>
</div>
<div id="Pet2ChipImage" 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" ></label>
*@ <input asp-for="Pet2ChipImage" />
<span asp-validation-for="Pet2ChipImage" ></span>
</div>
<div id="Pet2Sterile" style="display: none;">
<label>Has your 2nd pet been sterilized?</label>
@* <label asp-for="Pet2Sterile" ></label>
<input asp-for="Pet2Sterile" />
*@ <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" ></span>
</div>
<div id="Pet2SterileImage" 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" ></label>
*@ <input asp-for="Pet2SterileImage" />
<span asp-validation-for="Pet2SterileImage" ></span>
</div>
<div id="Pet2Additional" style="display: none;">
<label>Would you like to add any more detail regarding this your 2nd application?</label>
@* <label asp-for="Pet2Additional" ></label>
*@ <input asp-for="Pet2Additional" />
<span asp-validation-for="Pet2Additional" ></span>
</div>
<div id="Pet2Status" style="display: none;">
<label>What is the status of your 2nd pet?</label>
@* <label asp-for="Pet2Status" ></label>
*@ <input asp-for="Pet2Status" />
<span asp-validation-for="Pet2Status" ></span>
</div>
<div id="Pet2Image" style="display: none;">
<label>Please upload a picture of your 2nd pet (Photos from phone camera are accepted)</label>
@* <label asp-for="Pet2Image" ></label>
*@ <input asp-for="Pet2Image" />
<span asp-validation-for="Pet2Image" ></span>
</div>
</div >
<div >
<div id="Pet3Name" style="display: none;">
<label>What is your 3rd pets name?</label>
@* <label asp-for="Pet3Name" ></label>
*@ <input asp-for="Pet3Name" />
<span asp-validation-for="Pet3Name" ></span>
</div>
<div id="Pet3Type" style="display: none;">
<label>What type of pet is it?</label>
@* <label asp-for="Pet3Type" ></label>
*@ <input asp-for="Pet3Type" />
<span asp-validation-for="Pet3Type" ></span>
</div>
<div id="Pet3Sex" style="display: none;">
<label>What is the gender of your 3rd pet?</label>
@* <label asp-for="Pet3Sex" ></label>
<input asp-for="Pet3Sex" />
*@ <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" ></span>
</div>
<div id="Pet3Desc" style="display: none;">
<label>Please describe your 3rd pet</label>
@* <label asp-for="Pet3Desc" ></label>
*@ <input asp-for="Pet3Desc" />
<span asp-validation-for="Pet3Desc" ></span>
</div>
<div id="Pet3Chip" style="display: none;">
<label>Has your 3rd pet been Microchipped?</label>
@* <label asp-for="Pet3Chip" ></label>
<input asp-for="Pet3Chip" />
*@ <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" ></span>
</div>
<div id="Pet3ChipImage" 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" ></label>
*@ <input asp-for="Pet3ChipImage" />
<span asp-validation-for="Pet3ChipImage" ></span>
</div>
<div id="Pet3Sterile" style="display: none;">
<label>Has your 3rd pet been sterilized?</label>
@* <label asp-for="Pet3Sterile" ></label>
<input asp-for="Pet3Sterile" />
*@ <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" ></span>
</div>
<div id="Pet3SterileImage" 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" ></label>
*@ <input asp-for="Pet3SterileImage" />
<span asp-validation-for="Pet3SterileImage" ></span>
</div>
<div id="Pet3Additional" style="display: none;">
<label>Would you like to add any more detail regarding your 3rd pet application?</label>
@* <label asp-for="Pet3Additional" ></label>
*@ <input asp-for="Pet3Additional" />
<span asp-validation-for="Pet3Additional" ></span>
</div>
<div id="Pet3Status" style="display: none;">
<label>What is the status of your 3rd pet?</label>
@* <label asp-for="Pet3Status" ></label>
*@ <input asp-for="Pet3Status" />
<span asp-validation-for="Pet3Status" ></span>
</div>
<div id="Pet3Image" style="display: none;">
<label>Please upload a picture of your 3rd pet (Photos from phone camera are accepted)</label>
@* <label asp-for="Pet3Image" ></label>
*@ <input asp-for="Pet3Image" />
<span asp-validation-for="Pet3Image" ></span>
</div>
</div >
<div >
<div id="Pet4Name" style="display: none;">
<label>What is your 4th pets name?</label>
@* <label asp-for="Pet4Name" ></label>
*@ <input asp-for="Pet4Name" />
<span asp-validation-for="Pet4Name" ></span>
</div>
<div id="Pet4Type" style="display: none;">
<label>What type of pet is it?</label>
@* <label asp-for="Pet4Type" ></label>
*@ <input asp-for="Pet4Type" />
<span asp-validation-for="Pet4Type" ></span>
</div>
<div id="Pet4Sex" style="display: none;">
<label>What is the gender of your 4th pet?</label>
@* <label asp-for="Pet4Sex" ></label>
<input asp-for="Pet4Sex" />
*@ <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" ></span>
</div>
<div id="Pet4Desc" style="display: none;">
<label>Please describe your 4th pet</label>
@* <label asp-for="Pet4Desc" ></label>
*@ <input asp-for="Pet4Desc" />
<span asp-validation-for="Pet4Desc" ></span>
</div>
<div id="Pet4Chip" style="display: none;">
<label>Has your 4th pet been Microchipped?</label>
@* <label asp-for="Pet4Chip" ></label>
<input asp-for="Pet4Chip" />
*@ <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" ></span>
</div>
<div id="Pet4ChipImage" 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" ></label>
*@ <input asp-for="Pet4ChipImage" />
<span asp-validation-for="Pet4ChipImage" ></span>
</div>
<div id="Pet4Sterile" style="display: none;">
<label>Has your 4th pet been sterilized?</label>
@* <label asp-for="Pet4Sterile" ></label>
<input asp-for="Pet4Sterile" />
*@ <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" ></span>
</div>
<div id="Pet4SterileImage" 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" ></label>
*@ <input asp-for="Pet4SterileImage" />
<span asp-validation-for="Pet4SterileImage" ></span>
</div>
<div id="Pet4Additional" style="display: none;">
<label>Would you like to add any more detail regarding your 4th pet application?</label>
@* <label asp-for="Pet4Additional" ></label>
*@ <input asp-for="Pet4Additional" />
<span asp-validation-for="Pet4Additional" ></span>
</div>
<div id="Pet4Status" style="display: none;">
<label>What is the status of your 4th pet?</label>
@* <label asp-for="Pet4Status" ></label>
*@ <input asp-for="Pet4Status" />
<span asp-validation-for="Pet4Status" ></span>
</div>
<div id="Pet4Image" style="display: none;">
<label>Please upload a picture of your 4th pet (Photos from phone camera are accepted)</label>
@* <label asp-for="Pet4Image" ></label>
*@ <input asp-for="Pet4Image" />
<span asp-validation-for="Pet4Image" ></span>
</div>
</div >
<div >
<div id="ApplicationDate" >
<label>Date of application</label>
@* <label asp-for="ApplicationDate" ></label>
*@ <input asp-for="ApplicationDate" />
<span asp-validation-for="ApplicationDate" ></span>
</div>
<div id="ApplicationSigned" >
<label>Do you accept the terms and conditions?</label>
@* <label asp-for="ApplicationSigned" ></label>
<input asp-for="ApplicationSigned" />
*@ <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" ></span>
</div>
<div id="TrusteeAppStatus" style="display: none;">
<label>Is the applciation accepted by the Trustees?</label>
@* <label asp-for="TrusteeAppStatus" ></label>
*@ <input asp-for="TrusteeAppStatus" />
<span asp-validation-for="TrusteeAppStatus" ></span>
</div>
<div>
<label></label>
</div>
</div >
<div >
<input type="submit" value="Create" />
</div>
</form>
</div>
</div>
Thank you in advance.
CodePudding user response：
Please refer the code below:
$('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;
}
});
You can add an extra class with each pet-group to hide others.
CodePudding user response：
Update:
After I added the script into the site.js file, and slightly tweaked the script, I was successful in getting to the result I wanted.
$(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;
}
});