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

Question

我想从下拉菜单中选择一个值，然后，当我单击按钮时，它会隐藏某些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而言，您可以应用“ hidden”类来使用CSS隐藏元素或不隐藏元素。

然后，您可以切换div以及是否显示该外观，方法是使用jQuery单击按钮并通过使用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()" />