选中第一个列表项,级联第二个下拉列表
运行效果
HTM5规范,源码代码文件 cascadeMenu.html , 如下:
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="msh" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> cascadeMenu</title>
<style type="text/css">
select {
font-size: 11pt;
width:120px;
}
</style>
<script type="text/javascript">
// 构造数组
var detail_show = [];
var detail_value = [];
detail_show[0] = [];
detail_value[0] = [];
detail_show[0][0] = 'JavaScript';
detail_value[0][0] = '0101';
detail_show[0][1] = 'DOM';
detail_value[0][1] = '0102';
detail_show[0][2] = 'CSS3';
detail_value[0][2] = '0103';
detail_show[1] = [];
detail_value[1] = [];
detail_show[1][0] = 'C#';
detail_value[1][0] = '0201';
detail_show[1][1] = 'Java';
detail_value[1][1] = '0202';
detail_show[1][2] = 'PHP';
detail_value[1][2] = '0203';
detail_show[2] = [];
detail_value[2] = [];
detail_show[2][0] = 'MSSQL';
detail_value[2][0] = '0301';
detail_show[2][1] = 'Oracle';
detail_value[2][1] = '0302';
detail_show[2][2] = 'Mysql';
detail_value[2][2] = '0303';
function change(target)
{
// 获取级联的下拉列表
var deselect = document.getElementById("deselect");
// 清空第二个下拉列表的选项
deselect.innerHTML = null;
var m = target.selectedIndex;
if ( m >= 0 )
{
for(i = 0; i < detail_show[m].length; i++)
{
// 循环构造option,然后放在指定的option中
// new Option(show,value)构造一个option
deselect.options[i] = new Option(detail_show[m][i],
detail_value[m][i]);
}
// 设置默认选中第一个列表项
deselect.options[0].selected = true;
}
}
</script>
</head>
<body>
<div align="center">
<h2>cascadeMenu</h2>
<form id="mshForm">
<select name="caselect" id="caselect" onchange="change(this)";>
<option value="01" >前端设计</option>
<option value="02">开发语言</option>
<option value="03">数据库</option>
</select>
<select name="deselect" id="deselect">
</select>
</form>
</div>
</body>
</html>