jQuery 从选择选项切换 div
我需要从下拉选择选项框中切换 div。我希望它类似于 jquery 的 asmselect 但不是列出我希望它显示隐藏的 div 选项标签。那里有这样的东西吗？或者有人知道如何设置吗？谢谢，杰夫。
更新
基本上我想要的是上面 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>
I'm in need to toggle divs from a dropdown select option box. I'd like it similar to asmselect for 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.
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:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您在寻找这样的东西吗？ http://jsfiddle.net/tYvQ8/
当选择选项更改时，您
div与slideDown()并删除其hidden类。div兄弟姐妹。 （如果菜单不是同级菜单，则更容易。）slideUp()隐藏之前显示的同级菜单，这需要回调来在之后添加已完成hidden类>slideUp()这是另一种（在我看来，更好的）方法： http://jsfiddle.net/tYvQ8/1/
摆脱你的
hidden类，并使用 jQuery 隐藏它们。那么你就不用担心添加和删除类了。没有隐藏类的 HTML
jQuery
Were you looking for something like this? http://jsfiddle.net/tYvQ8/
When the select option changes, you
divwithslideDown()and remove itshiddenclass.divs siblings that have "is" in the class name. (Be easier if the menu wasn't a sibling.)slideUp(), which takes a callback to add thehiddenclass after theslideUp()is completeHere's another (in my opinion, better) way: 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.HTML without hidden class
jQuery
列表选项和 div 标签可以以相同的方式进行识别和切换。
$('#div_id').toggle();
因此，不要像您引用的 asmselect 插件那样使用元素选择器来选择选项标签，只需修改元素选择器以选择页面上的 div 标签即可。
List options and div tags can be identified and toggled the same way.
$('#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.
如前所述使用 .change()，但使用 jquery 的 .show() 和/或 .hide() 方法：
Use .change() as previously mentioned, but with jquery's .show() and/or .hide() methods: