Asp.net Mvc Show/Hide Div When Dropdownbox Option Change

I have my Dropdownbox list in .cshtml as follow:

@Html.Label('Role', new { @class = 'col-md-2 control-label' })

Solution 1:

change both #StudentSection, #LecturerSection as .StudentSection, .LecturerSection as they seem to be classes not id

see this working on the demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="col-md-10">
      <select id="Name">
    <option>Student</option>
    <option>Lecturer</option>
</select>
    </div>
</div>
<div class="StudentSection" style="display:none;">
StudentSection Some contents
</div> 

<div class="LecturerSection" style="display:none;">
LecturerSection Some contents
</div>

<script type="text/javascript">
$(document).ready(function () {
    $(".StudentSection").hide();
    $(".LecturerSection").hide();

    $("#Name").change(function () {
        if ($("#Name").val() == "Student") {
            $(".StudentSection").show();
            $(".LecturerSection").hide();
        }
        else {
            $(".LecturerSection").show();
            $(".StudentSection").hide();
        }
    });
});
</script>

Share