您的位置：首页 > Web前端 > JavaScript

js实现的下拉链表的联动效果

2012-10-25 10:53 651 查看

<!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>无标题文档</title>
<script language="javascript">
function changeSel() {
if(document.ld.xllb1.selectedIndex == 0) {
document.ld.xllb2.length=1;
document.ld.xllb1.selectedIndex=0;
document.ld.xllb2.selectedIndex=0;
document.ld.xllb2.options[0].text="请选择学校";		//设置显示的文字
document.ld.xllb2.options[0].value="请选择学校";
}

if(document.ld.xllb1.selectedIndex == 1) {
document.ld.xllb2.length=4;
document.ld.xllb1.selectedIndex=1;
document.ld.xllb2.selectedIndex=0;
document.ld.xllb2.options[0].text="重邮";
document.ld.xllb2.options[0].value="重邮";
document.ld.xllb2.options[1].text="重交";
document.ld.xllb2.options[1].value="重交";
document.ld.xllb2.options[2].text="重大";
document.ld.xllb2.options[2].value="重大";
document.ld.xllb2.options[3].text="重医";
document.ld.xllb2.options[3].value="重医";
}

if(document.ld.xllb1.selectedIndex == 2) {
document.ld.xllb2.length=2;
document.ld.xllb1.selectedIndex=2;
document.ld.xllb2.selectedIndex=0;
document.ld.xllb2.options[0].text="电子科技大学";
document.ld.xllb2.options[0].value="电子科技大学";
document.ld.xllb2.options[1].text="成都理工";
document.ld.xllb2.options[1].value="成都理工";
}

if(document.ld.xllb1.selectedIndex == 3) {
document.ld.xllb2.length=2;
document.ld.xllb1.selectedIndex=3;
document.ld.xllb2.selectedIndex=0;
document.ld.xllb2.options[0].text="北京大学";
document.ld.xllb2.options[0].value="北京大学";
document.ld.xllb2.options[1].text="清华大学";
document.ld.xllb2.options[1].value="清华大学";
}
}
</script>
</head>

<body>
<form action="" method="post" name="ld">
<select name="xllb1" onchange="changeSel()">
<option value="请选择城市" selected="selected">请选择城市</option>
<option value="重庆">重庆</option>
<option value="成都">成都</option>
<option value="北京">北京</option>
</select>

<select name="xllb2" size=1>
<option value="请选择学校">请选择学校</option>
</select>
</form>
</body>
</html>

显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航