JavaScript实现级联下拉框

<!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，也就是下一级变动是从数据库中查询得到的，而不是一开始就已经在页面中的
 -->