根据信息显示和隐藏div
问题描述:
我正在使用C#MVC开发Web应用程序。其中一页有几个div,其中应页面加载时隐藏,除非它们包含从数据库中提取的信息。用户有一个下拉菜单,可以从中选择合适的div显示。目前我实现这个使用jQuery为:根据信息显示和隐藏div
function showDiv() {
var divID = $("#usersddl option:selected").val();
$("#" + divID).show();
$("#" + divID).siblings().hide();
}
目前该函数被调用的usersddl
onchange
。
如果当前没有任何信息,每个下拉选项都会保存在数据库中,以及用户在div中提供的信息。我似乎无法弄清楚如何总是显示div如果它包含信息,否则显示在下拉选中。
答
你可以写一些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>
与像淘汰赛或角有约束力的框架更容易
+0
我用类似的方法来你的,达到所需的知识。我感谢您的帮助 – Code
, –
能给一个例子与角度请,如果你不介意 – Code