通過選擇下拉菜單並單擊按鈕來隱藏/顯示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()" />