<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> 级联菜单 </title>
<style type="text/css">
select {
font-size: 11pt;
width:150px;
}
</style>
<script type="text/javascript">
// 构造2个数组
var detail_show = [];
var detail_value = []; detail_show[0] = [];
detail_value[0] = [];
detail_show[0][0] = '上海';
detail_value[0][0] = '0101';
detail_show[0][1] = '北京';
detail_value[0][1] = '0102';
detail_show[0][2] = '广州';
detail_value[0][2] = '0103'; detail_show[1] = [];
detail_value[1] = [];
detail_show[1][0] = '纽约';
detail_value[1][0] = '0201';
detail_show[1][1] = '华盛顿';
detail_value[1][1] = '0202';
detail_show[1][2] = '加州';
detail_value[1][2] = '0203'; detail_show[2] = [];
detail_value[2] = [];
detail_show[2][0] = '伦敦';
detail_value[2][0] = '0301';
detail_show[2][1] = '利物浦';
detail_value[2][1] = '0302';
detail_show[2][2] = '伯明翰';
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>级联菜单</h2>
<form id="crazyitform">
<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>
<!--
当数据量大的时候，就被撑爆了，所以这种级联，最好使用AJAX，也就是下一级变动是从数据库中查询得到的，而不是一开始就已经在页面中的
-->