如何根据mvc4中的下拉选择显示div

时间:2016-01-30 05:37:43

标签: javascript jquery html twitter-bootstrap asp.net-mvc-4

我的jQuery代码无效。

我的观点

<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>

我的jquery代码

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

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

以上代码无效。 POVisit下拉列表有7个值,可直接从数据库中获取。最初我隐藏 OrderReceived 单选按钮。如果我选择&#34;订单&#34; POVisit DropDown中的值需要显示&#34; OrderReceivedYesNo&#34; div。但上面显示代码的代码无效。

1 个答案:

答案 0 :(得分:0)

解决我的问题。

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

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

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