本文档通过一个具体的HTML页面实例展示了如何使用jQuery来处理元素的选择与事件响应。页面中定义了两个下拉菜单，当用户更改第一个下拉菜单选项时，相应的第二个下拉菜单会显示或隐藏。此示例利用jQuery简化了DOM操作及事件处理。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""">
<html>
<head>
<title>无标题页</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<script src="jquery .js" type="text/javascript"></script>
<style type="text/css">
.sub{display:none;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#sel1").change(function(){
$("#sel1 option").each(function(i,o){
if($(this).attr("selected"))
{
$(".sub").hide();
$(".sub").eq(i).show();
}
});
});
$("#sel1").change();
});
</script>
<select id="sel1">
<option>北京</option>
<option>安徽省</option>
</select>
<select class="sub">
<option>中关村</option>
<option>朝阳区</option>
</select>
<select class="sub">
<option>合肥</option>
<option>安庆</option>
</select>
</body>
</html>
jQuery二级联动
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
