8

我基本上与以下问题中的人有相同的情况：

链接：如何通过选择显示/隐藏 div。（jquery）

通过在 Google 中的广泛搜索，我能够想出几种不同的方法，人们声称他们的方法有效。我还没有让任何东西正常工作。我对 jQuery 的了解还不够，无法完全理解如何从头开始编写它，因此我现在依赖于非常好的示例。

我一直在尝试使用的（基于我找到并尝试过的示例）是这样的：

<script type="text/javascript">
    (document).ready(function() {
        ('.box').hide();<br/>
        ('#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 周围的小于和大于符号来正确显示此消息。

当我测试这个时我得到了什么：

  • 首次加载时未选择任何内容 => 不显示 DIV。
  • 当我选择 DIV 区域 1 => DIV 区域 2 和 3 时显示。
  • 当我选择 DIV 区域 2 => DIV 区域 1 和 3 时显示。
  • 当我选择 DIV 区域 3 => DIV 区域 1 和 2 时显示。

我的大脑被炸了一天。我能做些什么来解决这个问题？

4

4 回答 4

10

我会这样做：

<script type="text/javascript">
$(document).ready(function(){
 $('.box').hide();
  $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).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>
于 2009-09-11T20:54:41.080 回答
3

@fudgey 给出了一个很好的解决方案。但毫无疑问。它将取决于值，并且需要更改每次的属性 ID 。 <div>

所以我会这样做`

    $(document).ready(function() {
        $('.box').hide();
        $('#dropdown').change(function() {      
            var selectedIdx = (0 == $(this).attr("selectedIndex"))? '' :                 $(this).attr("selectedIndex");
            if("" != selectedIdx){
                $('#divarea'+ selectedIdx ).hide().siblings().show();
            } else {
                $('.box').hide();
            }        
        });
    });
</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>`
于 2011-05-13T05:57:27.977 回答
1

交换显示/隐藏，使其看起来像这样：

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()
于 2009-09-11T20:22:53.327 回答
1

这段代码更简洁一点：

$(document).ready
(
  function()
  {
    $("div.box").hide();
    $("#dropdown").change
    (
      function()
      {
        var selectedValue = $(this).val();
        if(selectedValue !== "0")
        {
          $("div.box").show();
          $("#div" + selectedValue).hide();
        }   
      }   
    );
  }
};

本质上，如果选择了一个值（即，该选项未设置为“Choose”），则显示所有 div.box 元素。然后隐藏与所选选项匹配的 DIV。这应该发生得足够快，以至于闪光不明显。

于 2009-09-11T20:28:27.557 回答