Javascript版的下拉框联动

来源：互联网发布：手机源码怎么用编辑：程序博客网时间：2024/06/05 10:29

不管是在论坛也好，Q群也好，经常看到询问关于这个联动的问题，自己都被问烦了，干脆做一个例子放在这里，再有人问，让他们自己看吧。

说明一下，本例子是纯Javascript的联动，没有用到AJAX回发，如果数据量比较大时，IE响应可能比较慢

比如我公司，上千人的姓名加工号，组成的字符串，加上页面本身生成的HTML代码也庞大，IE经常加载半天，嗯，这么说吧，跟asp.net的那个ViewState的大小有的比啊，呵呵，废话不多说，例子在下面。

<html>
    <body onload="InsertProvince()">
        <form>
            省份：<select name="lstPro" onchange="ProChange(this);"></select>
            城市：<select name="lstCity"></select>
        </form>
        <script type="text/javascript">
            // 省份数组，省的ID+省的名称，从数据库中取出全部的省份，按下列格式组成一个javascript字符串
            var arrProvince = new Array(
                                new Array(1,"山东"),
                                new Array(2,"江西"),
                                new Array(3,"福建")
                             );
            // 城市数组，省的ID+城市的ID+城市的名称，从数据库中取出全部的城市，按下列格式组成一个javascript字符串
            var arrCity = new Array(
                            new Array(1,1,"济南"),
                            new Array(1,2,"青岛"),
                            new Array(1,3,"烟台"),
                            new Array(2,4,"南昌"),
                            new Array(2,5,"吉安"),
                            new Array(2,6,"九江"),
                            new Array(2,7,"赣州"),
                            new Array(2,8,"宜春"),
                            new Array(3,9,"福州"),
                            new Array(3,10,"厦门"),
                            new Array(3,11,"三明"),
                            new Array(3,12,"泉州")
                         );
            
            // 初始化用，填充全部的省份和第一个省份的城市用
            function InsertProvince(){
                var objPro = document.getElementById("lstPro");
                for(var i=0;i<arrProvince.length;i++){
                    var opn = new Option(arrProvince[i][1],arrProvince[i][0]);
                    objPro.options.add(opn);
                }
                ProChange(objPro);
            }
            // 省份下拉框变化时，取该省份的城市填充
            function ProChange(obj){
                var objCity = document.getElementById("lstCity");
                while(objCity.options.length > 0)
                    objCity.options.remove(0);
                for(var i=0;i<arrCity.length;i++)
                    if(arrCity[i][0] == obj.value){
                        var opn = new Option(arrCity[i][2],arrCity[i][1]);
                        objCity.options.add(opn);
                    }
            }
        </script>
    </body>
</html>