jQuery从选择选项切换div [英] jQuery toggle div from select option
问题描述
我需要从下拉选择选项框中切换div.我想要类似于 asmselect 的jQuery，而不是列出选项标签，我希望它显示一个隐藏的div.那里有这样的东西吗?还是有人知道如何设置?谢谢杰夫.
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.
已更新
基本上我想要的是通过切换div而不是生成列表的方式，上面的asmselect链接的外观和交互性.下面的示例代码:
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>
推荐答案
您是否正在寻找类似的东西? http://jsfiddle.net/tYvQ8/
Were you looking for something like this? 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"); });
});
当选择选项更改，则
- 用
slideDown()显示所选的div，并删除其hidden类. - 查找在类名中具有"is"的
div兄弟姐妹. (如果菜单不是同级菜单，则更容易.) - 用
slideUp()隐藏先前显示的兄弟姐妹，slideUp()完成后需要回调以添加hidden类
- 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
这是另一种方法(在我看来是更好的方法): http://jsfiddle .net/tYvQ8/1/
摆脱您的hidden类，并使用jQuery隐藏它们.然后，您不必担心添加和删除类.
Get rid of your hidden class, and use jQuery to hide them. Then you don't have to worry about adding and removing the 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
$('[class^=is]').hide();
$("#theSelect").change(function(){
var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is]').slideUp();
});
这篇关于jQuery从选择选项切换div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
