我需要从下拉选择框中切换div。我希望它类似于jquery的asmselect,但不是列出选项标签,而是显示隐藏的div。是否有类似的东西?或者有人知道如何设置它?谢谢,Jeff。
更新:
基本上我想要的是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>