jQuery jQuery从选择选项切换div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2767284/
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
jQuery toggle div from select option
提问by Jeffrey
I'm in need to toggle divs from a dropdown select option box. I'd like it similar to asmselectfor jquery but instead of listing the option tag I'd like it to display a hidden div. Is there anything like this out there? Or anyone know how to set it up? Thanks, Jeff.
我需要从下拉选择选项框中切换 div。我希望它类似于jquery 的asmselect，但我希望它显示一个隐藏的 div，而不是列出选项标签。外面有这样的东西吗？或者谁知道怎么设置？谢谢，杰夫。
UPDATED
更新
Basically what I want is the look and interaction of the asmselect link above though toggling divs instead of generating a list. Example code below:
基本上我想要的是上面 asmselect 链接的外观和交互，尽管切换 div 而不是生成列表。示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#theSelect").change(function(){
$("#theSelect option:selected").click(function(){
var value = $(this).val();
var theDiv = $(".is" + value);
$(theDiv).toggle(function(){
$(this).removeClass("hidden");
}),function(){
$(this).addClass("hidden");
}
});
});
});
</script>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="selectContainer">
<select id="theSelect">
<option value="">- Select -</option>
<option value="Patient">Patient</option>
<option value="Physician">Physician</option>
<option value="Nurse">Nurse</option>
</select>
</div>
<div class="hidden isPatient">Patient</div>
<div class="hidden isPhysician">Physician</div>
<div class="hidden isNurse">Nurse</div>
</body>
</html>
回答by user113716
Were you looking for something like this? http://jsfiddle.net/tYvQ8/
你在寻找这样的东西吗？http://jsfiddle.net/tYvQ8/
$("#theSelect").change(function() {
var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown().removeClass("hidden");
theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); });
});?
When the select option changes, you
When the select option changes, you
- Reveal the selected
divwithslideDown()and remove itshiddenclass. - Find the
divs siblings that have "is" in the class name. (Be easier if the menu wasn't a sibling.) - Hide the previously displayed siblings with
slideUp(), which takes a callback to add thehiddenclass after theslideUp()is complete
- 显示选定
div与slideDown()并删除其hidden类。 - 查找
div类名中带有“is”的s 个兄弟姐妹。（如果菜单不是兄弟，那就更容易了。） - 用 隐藏之前显示的兄弟
slideUp()，完成hidden后需要回调添加类slideUp()
Here's another (in my opinion, better) way:http://jsfiddle.net/tYvQ8/1/
这是另一种（在我看来，更好）的方式：http : //jsfiddle.net/tYvQ8/1/
Get rid of your hiddenclass, and use jQuery to hide them. Then you don't have to worry about adding and removing the class.
摆脱你的hidden类，并使用 jQuery 隐藏它们。这样你就不必担心添加和删除类了。
HTML without hidden class
没有隐藏类的 HTML
<body>
<div class="selectContainer">
<select id="theSelect">
<option value="">- Select -</option>
<option value="Patient">Patient</option>
<option value="Physician">Physician</option>
<option value="Nurse">Nurse</option>
</select>
</div>
<div class="isPatient">Patient</div>
<div class="isPhysician">Physician</div>
<div class="isNurse">Nurse</div>
</body>?
jQuery
jQuery
$('[class^=is]').hide();
$("#theSelect").change(function(){
var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is]').slideUp();
});?
回答by Jeremy
List options and div tags can be identified and toggled the same way.
可以以相同的方式识别和切换列表选项和 div 标签。
$('#div_id').toggle();
$('#div_id').toggle();
So instead of using an element selector to select an option tag like the asmselect plugin you referenced uses, just modify the element selector to select a div tag on the page.
因此，不要像您引用的 asmselect 插件那样使用元素选择器来选择选项标签，只需修改元素选择器以选择页面上的 div 标签即可。
回答by TomoMiha
Use .change() as previously mentioned, but with jquery's .show() and/or .hide() methods:
如前所述使用 .change() ，但使用 jquery 的 .show() 和/或 .hide() 方法：
if($(this).val() == 'selected_option') {
$('.selector1').show(); //displays element with display:none;
} else {
$('.selector1').hide(); //hides element again
}
