I have read many tutorials and many answers on stack overflow as well but it still does not work for me.Upon selecting an option (Yes)from drop down -> it should show the <div> tag otherwise <div> should be hidden.
Below is my code:
<h4>1. Does your school participate in the sponsored CAT4 scoring initiative?</h4>
@{
List<SelectListItem> listItems = new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = "Yes",
Value = "True"
});
listItems.Add(new SelectListItem
{
Text = "No",
Value = "False"
});
}
<div class="form-group" id="PickOption">
<div class="col-md-10">
@Html.DropDownListFor(model => model.ParticipateInCAT4Scoring, listItems, "<----Select Yes or No---->", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.ParticipateInCAT4Scoring, "", new { @class = "text-danger" })
</div>
</div>
<div id="OnYes" class="form-group" style="display:none">
@Html.Label("For what Grade levels?", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(m => m.GradeLevelsCAT4, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(m => m.GradeLevelsCAT4, "", new { @class = "text-danger" })
</div>
</div>
Below is the Script file which I am placing at bottom of View page:
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$('#PickOption').on('change', function () {
if ($(this).val() == 'True') {
document.getElementById('OnYes').style.display = "";
}
else {
document.getElementById('OnYes').style.display = "none";
}
});
});
</script>
}
PickOption is the ID of the wrapping div.
Replace #PickOption on this line with the ID or selector of the select box (usually auto-generated but you can specify.
$('#PickOption').on('change', function () {
Also since you're using jQuery, you can just do $('#OnYes').show();
Your selector is not right, please make sure that you bind event on dropdown so add a class on dropdown
@Html.DropDownListFor(model => model.ParticipateInCAT4Scoring, listItems, "<----Select Yes or No---->", new { @class = "form-control pickerDropdown" })
Now bind the event on added class like this:
$('.pickerDropdown').on('change', function () {