我基本上和下面问题中的人有同样的情况:
链接: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 区域 2 => 显示 DIV 区域 1 和 3。
- 当我选择 DIV 区域 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>
关于jquery - 使用 jQuery 使用 Select 显示/隐藏多个 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1413042/