我基本上和下面问题中的人有相同的情况:
链接: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周围的小于号和大于号的符号在此消息中正确显示.
我测试时得到的结果:
>首次加载时未选择任何内容=>没有显示DIV.
>当我选择DIV区域1 =>显示DIV区域2和3.
>当我选择DIV Area 2 =>显示DIV区域1和3.
>当我选择DIV Area 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="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>