select 多级联动

最新推荐文章于 2023-11-15 15:07:10 发布

iteye_2870

最新推荐文章于 2023-11-15 15:07:10 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

分类专栏： JQury 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_2870/article/details/82277009

JQury 专栏收录该内容

2 篇文章

订阅专栏

地区：<select id="drpProvince"></select> - <select id="drpCity"></select> - <select id="drpArea"></select>
<script type="text/javascript">
    //联动select数组
    var arrSelect = new Array(document.getElementById("drpProvince"), document.getElementById("drpCity"), document.getElementById("drpArea"));
    //多围数组数据，四围分别保存id、父级id、显示文本、文本值
    var arrData = new Array(
        <!--[999999,0,'--请选择--',''],[999998,999999,'--请选择--',''],[999997,999998,'--请选择--',''],-->
        [1,0,'北京','1'],[2,1,'北京','2']
        ,[3,0,'湖南','3'],[4,3,'长沙','4'],[5,3,'株洲','5'],[6,3,'湘潭','6'],[7,6,'岳塘区','7'],[8,6,'雨湖区','8'],[9,6,'河塘区','9']
        ,[10,0,'广东','10'],[11,10,'广州','11'],[12,10,'佛山','12'],[13,11,'天河区','13'],[14,11,'番禺区','14'],[15,11,'越秀区','15'],[16,12,'南山区','16'],[17,12,'蝉城区','17']
    );
    //默认值数组
    var arrDefault = new Array('10' ,'11' ,'13');
    //初始化主函数
    function arrInit(strInitID, arrSelect, arrMatrix, arrDefValue) {
        function doChange(iIndex) {
            var iCount = 0;
            var sParentID = strInitID;
            if (iIndex > 0) sParentID = arrSelect[iIndex - 1].options[arrSelect[iIndex - 1].selectedIndex].ID;
            with (arrSelect[iIndex]) {
                length = 0;
                options[iCount++] = new Option('--所有--', '0', false, true);
                for (var i = 0; i < arrMatrix.length; i++) {
                    if (String(arrMatrix[i][1]) == String(sParentID)) {
                        var oNewOption = new Option(arrMatrix[i][2], arrMatrix[i][3], false, false);
                        oNewOption.ID = arrMatrix[i][0];
                        options[iCount++] = oNewOption;
                        if(arrMatrix[i][3] == arrDefValue[iIndex])options[iCount - 1].selected = true;
                    };
                };
                /* if (iCount == 0) { //列表数为0则新增默认项
                    var oNull = new Option("--", null, false, true);
                    oNull.ID = "_0x" + (new Date()).getTime();
                    options[0] = oNull;
                };*/
                
                //联动改变所有子select
                if (++iIndex < arrSelect.length) doChange(iIndex);
            };
        };
        if (!arrDefValue) arrDefValue = [];
        for (var i = 0; i < arrSelect.length - 1; i++) {
            eval("arrSelect[" + i + "].onchange = function(){ doChange(" + (i + 1) + "); };");
        }
        doChange(0);
        //只有第一次调用初始化主函数arrInit才使用默认值，之后手动选择不受默认值限制，因此清空。
        arrDefValue = [];
    };
    arrInit(0,arrSelect,arrData,arrDefault);
</script>