通过使用jQuery进行选择来显示/隐藏多个DIV [英] Show/Hide multiple DIVs with Select using 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 =dropdownname =dropdown> 
< option value =0>选择< / option> 
< option value =area1> DIV Area 1< / option> 
< option value =area2> DIV区域2< / option> 
< option value =area3> DIV区域3< / option> 
< / select> 
< / form> 
< div id =divarea1class =box> DIV Area 1< / div> 
< div id =divarea2class =box> DIV Area 2< / div> 
< div id =divarea3class =box> DIV Area 3< / div> 
  

• 注意：我使用括号而不是小于等于

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

• 第一次加载时没有任何选择=>没有DIV显示。


• 当我选择DIV区域1 => DIV区域2和3显示。


• 当我选择DIV Area 2 => DIV Area 1和3时显示。 > DIV区域1和2显示。

我的大脑在一天中被炸。我可以做些什么来解决这个问题？

解决方案

我会这样做：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（'。box'）。hide（）; 
 $（'＃dropdown'）。change（function（）{
 $（'。box'）。hide（）; 
 $（'＃div'+ $（this）.val（））。show（）; 
}）; 
}）; 
< / script> 
< form> 
< select id =dropdownname =dropdown> 
< option value =0>选择< / option> 
< option value =area1> DIV Area 1< / option> 
< option value =area2> DIV区域2< / option> 
< option value =area3> DIV区域3< / option> 
< / select> 
< / form> 
< div id =divarea1class =box> DIV Area 1< / div> 
< div id =divarea2class =box> DIV Area 2< / div> 
< div id =divarea3class =box> DIV Area 3< / div> 
  

I essentially have the same situation as the person in the following question:

Link: how to show/hide divs by select.(jquery)

Through extensive searching within Google I was able to come up with several different methods in which people claim their method works. I have yet to get any to work correctly yet. I don't yet know enough about jQuery to fully understand how to write this from scratch, thus I rely on really good examples for now.

What I've been trying to work with (based on examples I've found and tried) is this:

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

• Note: I am using brackets rather than the less-than and greater-than signs around html to display correctly in this message.

What I get when I test this:

• On first load with nothing selected => No DIV is display.
• 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.

My brain is fried for the day. What can I do to fix this?

解决方案

I'd do this:

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

这篇关于通过使用jQuery进行选择来显示/隐藏多个DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！