Question

我有两个下拉列表，如下所示

$('#ddl_SearchBy').change(function () {              
    if ($('#ddl_SearchBy').val() == 'status') {
        $("#ddlDiscountType").hide();
        $("#ddlStatus").show();
    }
});

在Jquery中我做过类似的事情

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>
    $(document).ready(function () {

        var newOptions = {
            "Option 1": "value1",
            "Option 2": "value2",
            "Option 3": "value3"
        };

        var $el = $("#host_select");
        $el.empty(); // remove old options
        $.each(newOptions, function (value, key) {
            $el.append($("<option></option>")
               .attr("value", value).text(key));
        });


        // First
        $("#host_select").val($("#host_select option:first").val());

        alert($("#host_select").val());

        //Second
        $("#host_select").val($("#host_select option:eq(1)").val());

        alert($("#host_select").val());

        //third
        $("#host_select").val($("#host_select option:eq(2)").val());

        alert($("#host_select").val());

    });
</script>
</head>
<body>
   <select class="form-control" id="host_select"></select>
</body>
</html>

但当我改变事件ddlstatus未显示时

Answer 1

您可以通过将其置于DIV中来更改可见性选项，并使DIV隐藏和显示取决于您的要求。

请尝试this。

Answer 2

您可以执行以下两项更改

1）。在CSHTML文件中

@Html.DropDownList("ddl_Status", Model.lstStatus, "-Select Status-", new { @class = "form-control", @style = "display:none", @id = "ddl_Status" })

将id更改为“ddlStatus”，如下所示，

@Html.DropDownList("ddl_Status", Model.lstStatus, "-Select Status-", new { @class = "form-control", @style = "display:none", @id = "ddlStatus" })

2）。在JS文件中

$('#ddl_SearchBy').change(function () {


    if ($('#ddl_SearchBy').val() == 'status') {
        $("#ddlDiscountType").hide();
        $("#ddl_Status").show();
    }
});

Answer 3

如果用$（document）.ready（function（）{}）包装你的函数;

在mvc4 cshtml中隐藏/显示控件

3 个答案: