使用 jQuery 选择显示/隐藏多个 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1413042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide multiple DIVs with Select using jQuery
提问by Mottie
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.
通过在谷歌内进行广泛搜索，我能够想出几种不同的方法，人们声称他们的方法有效。我还没有让任何人正常工作。我对 jQuery 的了解还不够充分，无法完全理解如何从头开始编写它，因此我现在依赖于非常好的示例。
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.
- 注意：我在 html 周围使用括号而不是小于号和大于号来正确显示在此消息中。
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.
- 首次加载时未选择任何内容 => 不显示 DIV。
- 当我选择 DIV 区域 1 => DIV 区域 2 和 3 时显示。
- 当我选择 DIV 区域 2 => DIV 区域 1 和 3 时显示。
- 当我选择 DIV 区域 3 => DIV 区域 1 和 2 时显示。
My brain is fried for the day. What can I do to fix this?
我的大脑被炸了一天。我能做些什么来解决这个问题？
回答by Mottie
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>
回答by Bit Curios
@fudgey has given a nice solution. but have little doubt. It will depend on value and need to change Attribute ID of<div>every time.
@fudgey 给出了一个很好的解决方案。但毫无疑问。这将取决于值并且每次都需要更改属性 ID<div>。
So I'd do this `
所以我会这样做`
$(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>`
回答by T. Stone
Swap show/hide so that it looks like this:
交换显示/隐藏，使其看起来像这样：
$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()
回答by David Andres
This code is a little more succinct:
这段代码更简洁一点：
$(document).ready
(
function()
{
$("div.box").hide();
$("#dropdown").change
(
function()
{
var selectedValue = $(this).val();
if(selectedValue !== "0")
{
$("div.box").show();
$("#div" + selectedValue).hide();
}
}
);
}
};
Essentially, if there is a value selected (i.e., the option is not set to "Choose"), then all div.box elements are shown. The DIV matching the selected option is then hidden. This should happen quickly enough so that the flash is not noticeable.
本质上，如果选择了一个值（即该选项未设置为“选择”），则显示所有 div.box 元素。然后隐藏与所选选项匹配的 DIV。这应该发生得足够快，以使闪光不明显。
