Js 联动下拉列表

 

使用示例：

    <select id="Prov" name="Prov"></select>
    <select id="City"></select>
    <script type="text/javascript">
        initRootList(subcat, "Prov", "City");
    </script>

 

相关Js如下：

// ==============================================================================
// Created by Bndy at 04 / 24 / 2010
// Copyright (c) 2010 Bndy, All rights reserved.
// Welcome to my site http : // www.bndy.net
//
//                    * * * * * * * * * * * * * 
//                    * MAIL- bndy5337@163.com *       
//                    * Q Q - 81795705  http://www.bndy.net
//                    * MSN - bndy5337@msn.com *
//                    * * * * * * * * * * * * * 
//
// ------------------------------------------------------------------------------
// 
// ==============================================================================

/*********************************** 联动下拉列表函数(暂只支持二级联动)  **************************************/

function initSubList(parentValue, ddlID, dataArray) {
    var nextControl = document.getElementById(ddlID);
    if (nextControl == null) return;
    nextControl.length = 0;
    for (var i = 0; i < dataArray.length; i++) {
        if (dataArray[i][0][0] == parentValue) {
            if (nextControl != null) {
                for (var x = 0; x < dataArray[i].length; x++) {
                    nextControl.options[nextControl.options.length] = new Option(dataArray[i][x][1], dataArray[i][x][1]);
                }
            }
        }
    }
}

/*dataArray 示例如下：
* var subcat = new Array();
*
* subcat[0] = new Array();
* subcat[0][0] = new Array('省份', '城市');
* subcat[1] = new Array();
* subcat[1][0] = new Array('北京', '北京');
* ……
* subcat[5] = new Array();
* subcat[5][0] = new Array('河北', '石家庄');
* subcat[5][1] = new Array('河北', '南宫');
* subcat[5][2] = new Array('河北', '辛集');
* subcat[5][3] = new Array('河北', '衡水');
* subcat[5][4] = new Array('河北', '邢台');
*/

function initRootList(dataArray) {
    for (var index = 1; index < arguments.length; index++) {
        var ddl = document.getElementById(arguments[index]);
        if (index != arguments.length - 1) {
            var arg = arguments[index + 1];

            //ddl.setAttribute("onchange", "initSubList(this.value, \"" + arg + "\",dataArray);");

            // 兼容ie 7.0, 8.0, FF
            ddl.onchange = function () {
                initSubList(this.value, arg, dataArray);
            };
        }

        if (index == 1) {
            for (var i = 0; i < dataArray.length; i++) {
                ddl.options[ddl.options.length] = new Option(dataArray[i][0][0], dataArray[i][0][0]);
            }
        }
        else {
            initSubList(document.getElementById(arguments[index - 1]).value, arguments[index], dataArray);
        }
    }
}