Question

我基本上和下一个问题中的人有相同的情况：

链接：how to show/hide divs by select.(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周围的小于号和大于号的符号在此消息中正确显示。

我测试时得到的结果：

首次加载时未选择任何内容=＆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

我会这样做：

<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>

Answer 2

@fudgey提供了一个很好的解决方案。但毫无疑问。这取决于价值，每次都需要更改 <div>的属性ID。

所以我会这样做 `

$(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>`

Answer 3

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

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()

Answer 4

这段代码更简洁：

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

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

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

4 个答案: