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

Question

我想从下拉列表中选择一个值，然后，当我单击按钮时，它会隐藏某个 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();
    }
}

我希望我的问题很清楚。

Answer 1

我不确定您想如何处理下拉输入中的值，但如果您仅与按钮交互以影响 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()" />