gpt4 book ai didi

jQuery 从选择选项切换 div

转载 作者:行者123 更新时间:2023-12-01 00:01:50 24 4
gpt4 key购买 nike

我需要从下拉选择选项框中切换 div。我希望它类似于 asmselect对于 jquery,但我不想列出选项标签,而是希望它显示隐藏的 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>

最佳答案

你在寻找这样的东西吗? 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 并删除其隐藏类。
  • 查找类名中包含“is”的 div sibling 。 (如果菜单不是同级菜单,那就更容易了。)
  • 使用 slideUp() 隐藏之前显示的同级,它会在 slideUp() 完成后调用回调来添加 hidden

这是另一种(我认为更好)的方法: http://jsfiddle.net/tYvQ8/1/

摆脱你的hidden类,并使用jQuery来隐藏它们。那么您就不必担心添加和删除类。

没有隐藏类的 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,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2767284/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com