onchange事件：当改变下垃列表选项时执行
add()方法：向下垃列表中添加一个选项
options[]属性：返回包含下垃列表中的所有选项的一个数组
selectedIndex属性：设置或返回下垃列表中被选中项的索引号
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
// 定义一个 省级 数组
var searr=new Array("四川","湖南","广东")
function init() {
//获取第一个下垃列表元素
var node=document.getElementById("seleOne");
//遍历数组
for (var i=0;i<searr.length;i++){
//把数组的值添加到下垃列表中
node.add(new Option(searr[i]));
}
//为每一个省级选项，赋值一个 城市级 的数组
searr[0]=new Array("成都","宜宾","自贡");
searr[1]=new Array("长沙","衡阳","常德");
searr[2]=new Array("广州","深圳","珠海");
//执行下面的seleId()方法
seleId();
}
function seleId() {
var nodeOne=document.getElementById("seleOne");
//获取省级下垃列表中被选中选项的索引号
var index=nodeOne.selectedIndex;
var nodeTwo=document.getElementById("seleTwo");
//城市级下垃列表 显示前把上一次显示的城市清除，以免重复显示
nodeTwo.options.length=0;
for (var i=0;i<searr[index].length;i++){
nodeTwo.add(new Option(searr[index][i]));
}
}
</script>
</head>
<body "init()">
<div>
<select id="seleOne" onchange="seleId()">
</select>
<select id="seleTwo">
</select>
</div>
</body>
</html>