三级联动实例代码

最新推荐文章于 2022-06-18 09:58:32 发布

奋斗到深夜的小程序员

最新推荐文章于 2022-06-18 09:58:32 发布

阅读量524

点赞数

本文链接：https://blog.csdn.net/adminyan/article/details/73105689

版权

 
 
  
  


    
    
    
    


省：

市：

区：


    
    
    
     
     
    
     
     
    
     
     

    
    

<script>
    //声明省
    var pres = ["小学", "初中", "高中"]; //直接声明Array
    //声明市
    var cities = [
        ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
        ["初一", "初二", "初三"],
        ["高一", "高二", "高三"]
    ];
    var areas = [
        [
            ["语文", "数学", "英语"],
            ["语文", "数学", "英语"],
            ["语文", "数学", "英语"],
            ["语文", "数学", "英语"],
            ["语文", "数学", "英语"],
            ["语文", "数学", "英语"]
        ],
        [
            ["语文", "数学", "英语","物理","化学"],
            ["语文", "数学", "英语","物理","化学"],
            ["语文", "数学", "英语","物理","化学"]
        ],
        [
            ["语文", "数学", "英语","物理","化学"],
            ["语文", "数学", "英语","物理","化学"],
            ["语文", "数学", "英语","物理","化学"]
        ]
    ]
    //设置一个省的公共下标
    var pIndex = -1;
    var preEle = document.getElementById("pre");
    var cityEle = document.getElementById("city");
    var areaEle = document.getElementById("area");
    //先设置省的值
    for (var i = 0; i < pres.length; i++) {
        //声明option.
        var op = new Option(pres[i], i);
        //添加
        preEle.options.add(op);
    }
    function chg(obj) {
        if (obj.value == -1) {
            cityEle.options.length = 0;
            areaEle.options.length = 0;
        }
        //获取值
        var val = obj.value;
        pIndex = obj.value;
        //获取ctiry
        var cs = cities[val];
        //获取默认区
        var as = areas[val][0];
        //先清空市
        cityEle.options.length = 0;
        areaEle.options.length = 0;
        for (var i = 0; i < cs.length; i++) {
            var op = new Option(cs[i], i);
            cityEle.options.add(op);
        }
        for (var i = 0; i < as.length; i++) {
            var op = new Option(as[i], i);
            areaEle.options.add(op);
        }
        document.getElementById('a').value=parseInt(val)+1;
        document.getElementById('b').value=parseInt(document.getElementById('city').value)+1;
        document.getElementById('c').value=parseInt(document.getElementById('area').value)+1;
    }
    function chg2(obj) {
        var val = obj.selectedIndex;
        var as = areas[pIndex][val];
        areaEle.options.length = 0;
        for (var i = 0; i < as.length; i++) {
            var op = new Option(as[i], i);
            areaEle.options.add(op);
        }
        document.getElementById('b').value=parseInt(val)+1;
        document.getElementById('c').value=parseInt(document.getElementById('area').value)+1;

    }
    function chg3(obj) {
        var val = obj.selectedIndex;
        document.getElementById('c').value=parseInt(val)+1;
    }
</script>