Question

我基本上和其他很多人一样。

通过在Google内进行广泛搜索，我能够提出几种不同的方法，让人们声称他们的方法有效。我还没有正常工作。我还没有充分了解jQuery以完全理解如何从头开始编写这个内容，因此我现在依赖于非常好的示例。

我一直在尝试使用的内容（基于我已经找到并尝试过的示例）是：

<script type="text/javascript">
    $(document).ready(function() {
        ('.box').hide();
        ('#dropdown').change(function() {
        ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
        ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
        ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

注意：我使用括号而不是html周围的小于号和大于号的符号在此消息中正确显示。我测试时得到的结果：

首次加载时未选择任何内容=＆gt;没有显示DIV。

当我选择DIV Area 1 =＆gt;显示DIV区域2和3。

当我选择DIV Area 2 =＆gt;显示DIV区域1和3。

当我选择DIV Area 3 =＆gt;显示DIV区域1和2。

我的大脑一天都在煎。我该怎么做才能解决这个问题？

Answer 1

请注意，您缺少JS代码中对jQuery的$引用。我将假设这只是问题的一个错字。

实现此目标的最简单方法是show()选择更改后的所有div，然后使用所选值隐藏基于其div的相关单id。像这样：

$(document).ready(function() {
  $('#dropdown').change(function() {
    $('.box').show().filter('#div' + $(this).val()).hide();
  });
});

.box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="dropdown" name="dropdown">
    <option value="0">Choose</option>
    <option value="area1">DIV Area 1</option>
    <option value="area2">DIV Area 2</option>
    <option value="area3">DIV Area 3</option>
  </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

Answer 2

您缺少$参考。

我在JsFiddle中使用$尝试了您的代码，它运行正常

$(document).ready(function() {
        $('.box').hide();        
    });
//just tried to move it out of document. ready. But it makes no difference
$('#dropdown').change(function() {        
    $('#divarea1')[ ($(this).val() == "area1") ? 'hide' : 'show' ]();
    $('#divarea2')[ ($(this).val() == "area2") ? 'hide' : 'show' ]();
    $('#divarea3')[ ($(this).val() == "area3") ? 'hide' : 'show' ]();
    });

Answer 3

正如其他人所说，你错过了$。

根据您上面的评论： On first load with nothing selected => No DIV is displayed. When I select DIV Area 1 => DIV Area 2 and 3 are displayed. When I select DIV Area 2 => DIV Area 1 and 3 are displayed. When I select DIV Area 3 => DIV Area 1 and 2 are displayed

如果您想要显示其他DIV而不是选择的那个......您可以使用以下代码：

$(function() {

    $('.box').hide();
        $('#dropdown').change(function() {
          var v = $(this).val();
                $('.box').hide();
                $(".box:not(#div"+v+")").show();           

        });


        });

参见FIDDLE：https://jsfiddle.net/dwn2bwhn/19/

使用jQuery选择显示/隐藏多个DIV

3 个答案: