JS简单实现二级联动菜单

<form method="post" action="">
        省/市：<select id="province" onchange="alter(this.selectedIndex)"></select>
        市/区：<select id="city"></select>
    </form>
    <script type="text/javascript">
        //定义省/直辖市数组
        var arr_province = ["请选择省/直辖市","北京市","上海市","广东省"];
        //定义市/区二维数组
        var arr_city = [
                        ["请选择市/区"],
                        ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
                        ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
                        ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']
                    ];
        //获取对象
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        //初始化菜单
        onload = function () {
            //指定省option标记的个数
            province.length = arr_province.length;
            //数组数据写入<option>标记中
            for(var i = 0; i < arr_province.length; i++){
                province.options[i].text = province.options[i].value = arr_province[i];
            }
            //设置省列表默认选项
            var index = 0;
            province.index = index;
            //指定城市option标记的个数
            city.length = arr_city[index].length;
            //数组数据写入option标记
            for (var j = 0; j < arr_city[index].length; j++) {
                city.options[j].text = city.options[j].value = arr_city[index][j];
            }
        }
        function alter(index) {
            //修改省列表的选择项
            province.index = index;
            //指定城市option标记的个数
            city.length = arr_city[index].length;
            //数组中的数据写入option标记
            for (var j = 0; j < arr_city[index].length; j++) {
                city.options[j].text = city.options[j].value = arr_city[index][j];
            }
        }
    </script>

　　运行：