gpt4 book ai didi

javascript - 通过选择下拉菜单和按钮单击来隐藏/显示 div

转载 作者:行者123 更新时间:2023-11-28 00:12:04 27 4
gpt4 key购买 nike

我想从下拉列表中选择一个值,然后,当我单击按钮时,它会隐藏某个 div 并显示另一个 div。我对如何实现这一目标感到困惑。所以我有两个 div。

<div id="div1"> some content </div>
<div id="div2"> some content </div>
@Html.DropDownListFor(model => model.Reference, ViewBag.ISharedUI as SelectList, "-- REFERENCE TYPE -- SHOW ALL", new { @id = "testID" })

这是我的按钮。

<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />

这是我的职责。我努力去做,

function abc() {
if ('#testID' != 1) {
$('#div1').show();
$('#div2').hide();
} else if (testID != 2) {
$('#div1').show();
$('#div2').hide();
} else {
$('#div1').hide();
$('#div2').hide();
}
}

我希望我的问题很清楚。

最佳答案

我不确定您想如何处理下拉输入中的值,但如果您仅与按钮交互以影响 div,那么它与影响 div 的状态不太相关。

就隐藏 div 而言,您可以使用 CSS 应用隐藏或不隐藏元素的“hidden”类。

然后,您可以通过使用 jQuery 单击按钮来切换 div 以及它是否显示,方法是使用toggleClass 添加和删除该隐藏类。

如果您还有其他问题,请告诉我。

$(document).ready(function() {
$(".btn").on("click", function() {
$("#div1").toggleClass("hidden");
$("#div2").toggleClass("hidden");
})
})
.hidden {
display: none;
}
<div id="div1"> some content </div>
<div id="div2" class="hidden"> some content </div>

<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />

关于javascript - 通过选择下拉菜单和按钮单击来隐藏/显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30794313/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com