根据信息显示和隐藏 div答案

【问题标题】：show and hide div based on information根据信息显示和隐藏 div
【发布时间】：2016-06-07 08:19:48
【问题描述】：

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

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

目前该函数被称为onchange of usersddl。

每个下拉选项连同它的信息一起保存在数据库中，如果它当前没有任何信息，则由用户在 div 中提供。如果它包含信息，我似乎无法弄清楚如何始终显示 div，否则在选择的下拉列表中显示它。

【问题讨论】：

使用 Knockout 或 Angular 等绑定框架更容易，
如果您不介意，可以展示一个 Angular 示例

标签： jquery html asp.net-mvc

【解决方案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>

【讨论】：

我使用了与您类似的方法并达到了要求。感谢您的帮助