根据信息显示和隐藏div

时间:2016-06-07 08:19:49

标签: jquery html asp.net-mvc

我正在使用C#MVC开发一个Web应用程序。其中一个页面有几个div,当页面加载时隐藏,除非它们包含从数据库中提取的信息。用户可以选择下拉菜单并选择相应的div节目。目前我正在使用jQuery实现这一目标:

function showDiv() {
   var divID = $("#usersddl option:selected").val();
   $("#" + divID).show();
   $("#" + divID).siblings().hide();
}

目前,该功能名为onchange的{​​{1}}。

每个下拉选项都会保存在数据库中,以及用户在div中提供的信息(如果它当前没有任何信息)。我似乎无法弄清楚如何始终显示div,如果它包含信息,否则在选定的下拉列表中显示它。

1 个答案:

答案 0 :(得分:1)

你可以编写一小段jQuery来遍历页面上的所有div并检查每个div中输入字段的值。如果div只包含空输入,则隐藏它,否则显示它。

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.infoDiv').each(function (i, obj) {

                var textboxes = $(this).find("input[type=text]");

                var containsInfo = false;

                for(var i = 0; i < textboxes.length;i++)
                {
                    var text = $(textboxes[0]).val();
                    if (text != "")
                        containsInfo = true;
                }

                if (!containsInfo)
                    $(this).hide();

            });

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="infoDiv">
    <table>
        <tr>
            <td>Name</td>
            <td><input type="text" value="Some name..." /></td>
        </tr>
    </table>
    </div>
        <div class="infoDiv">
    <table>
        <tr>
            <td>Name</td>
            <td><input type="text" /></td>
        </tr>
    </table>
    </div>
    </form>
</body>