How to show div based on dropdown selection in mvc4

Question

My jQuery code is not working.

My View

<div class="col-sm-4">
    <div class="form-group">
        @Html.LabelFor(model => model.POVisit, new { @class = "control-  label",id="POVisit" })
        @Html.DropDownList("POVisitID", "Select")
    </div>
</div>

<div id ="OrderReceivedYesNo">
    <div class="col-sm-4">
        <div class="form-group">
            @Html.LabelFor(model => model.OrderReceived, new { @class = "control-label" })
            @Html.RadioButton("OrderReceived", 1) Yes
            @Html.RadioButton("OrderReceived", 0) No
        </div>
    </div>
</div>

My jquery code

$(document).ready(function () {
    $("#OrderReceivedYesNo").hide();
});

$(document).ready(function () {
    $("#POVisit").on('change', function () {
        if (this.value == "Order") {
            $("#OrderReceivedYesNo").show();
        }
    });
});

The above code is not working. The POVisit Dropdown have 7 values which is directly fetch from Database. Initially i hide the OrderReceived radio buttons. If I select the "Order" value in POVisit DropDown it needs to show the "OrderReceivedYesNo" div. But the above code that show code is not working.

Answer 1

Solution for my question.

 $(document).ready(function () {
    $("#OrderReceivedYesNo").hide();

    $("#POVisitID").change(function () {

        if ($("#POVisitID option:selected").text() == "Order") {
            $("#OrderReceivedYesNo").show();
        }
        else {
            $("#OrderReceivedYesNo").hide();
        }
    });
});