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而言，你可以应用一个类＆＃34;隐藏＆＃34;用CSS隐藏元素。

然后你可以通过点击带有jQuery的按钮切换div以及它是否出现，方法是添加并删除带有toggleClass的隐藏类。

如果您还有其他问题，请与我们联系。

＆＃13;

$(document).ready(function() {
  $(".btn").on("click", function() {
    $("#div1").toggleClass("hidden");
    $("#div2").toggleClass("hidden");
  })
})

＆＃13;

.hidden {
  display: none;
 }

＆＃13;

<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()" />

＆＃13;

通过选择下拉列表和按钮单击来隐藏/显示div

1 个答案: