首先，在 HTML 方面，我是一個真正的菜鳥，但我一直在研究 Azure，并開始使用 ASP.NET MVC 制作一個專案。在整個程序中，我發現需要根據同一頁面中的下拉選擇隱藏/顯示頁面中的不同元素。我用谷歌搜索了解決方案，但似乎沒有什么能滿足我的需求。
基本上邏輯是這樣的：
根據 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 >
<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 >
<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 >
<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 >
<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 >
<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 >
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
先感謝您。
uj5u.com熱心網友回復：
請參考以下代碼：
$('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;
}
});
您可以為每個寵物組添加一個額外的類來隱藏其他人。
uj5u.com熱心網友回復：
更新：
在我將腳本添加到 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;
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/483852.html
上一篇：控制器沒有從表單接收到所有屬性
下一篇：使用代理后授權停止作業