I want to hide and show a div tag based on the dropdown selection made by the user.
Below is my code:
<div class="form-group row">
<div class="col-md-6">
<label asp-for="AuditDetails" class="control-label"></label>
<select asp-for="AuditDetails" class="form-control" required="true">
<option value="4">--Type of Record--</option>
<option value="txnNum">Fetch with Transaction Number</option>
<option value="custNum">Fetch with Customer Number</option>
<option value="docHash">Fetch by record number</option>
</select>
<span asp-validation-for="TypeOfRecord" class="text-danger"></span>
</div>
<div class="col-md-6">
<label asp-for="TransactionNumber" class="control-label"></label>
<input asp-for="TransactionNumber" class="form-control" />
<span asp-validation-for="TransactionNumber" class="text-danger"></span>
</div>
<div class="col-md-6">
<label asp-for="CustomerNumber" class="control-label"></label>
<input asp-for="CustomerNumber" class="form-control" />
<span asp-validation-for="CustomerNumber" class="text-danger"></span>
</div>
<div class="col-md-6">
<label asp-for="RecordNumber" class="control-label"></label>
<input asp-for="RecordNumber" class="form-control" />
<span asp-validation-for="RecordNumber" class="text-danger"></span>
</div>
if the user selects "Fetch with Transaction Number" then I want to show the div tag that has the input of "transactionNumber".
If user selects "Fetch with Customer Number" then I want to hide the div tag of transaction number and show the div tag of customer number and same with the "Fetch with record number".
I want hide the div tag of both transaction number and customer number and show the div tag of Record number.
any help will be appreciated