首页 > 代码库 > js 四级联动

js 四级联动

2024-10-12 19:48:02   213人阅读

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select style="width: 100px;" id="pre" onchange="chg(this);">
        <option value="http://www.mamicode.com/-1">请选择</option>
    </select>
    <select style="width: 100px;" id="city" onchange="chg2(this)" ;><option value="http://www.mamicode.com/-1">请选择</option></select>
    <select style="width: 100px;" id="area" onchange="chg3(this)"><option value="http://www.mamicode.com/-1">请选择</option></select>
 
    <select style="width: 100px;" id="way"><option value="http://www.mamicode.com/-1">请选择</option></select>
</body>
<script>
    //声明省
    var pres = ["贵州"]; //直接声明Array
    //声明市
    var cities = [
        ["-请选择-","贵阳", "遵义", "安顺"],
    ];
    var areas = [
        [
            ["-请选择-"],
            ["-请选择-", "云岩区", "南明区"],
            ["-请选择-", "汇川区", "红花岗区"],
            ["-请选择-", "平坝区", "普定区"],
        ]
    ]
    var wayareas = [
        [
            ["-请选择-", "喷水池2", "昌平3"],
            ["-请选择-", "海淀2", "海淀3"]
        ],
        [
            ["-请选择-"],
            ["-请选择-", "上海路", "南京路"],
            ["-请选择-",, "丁字口", "遵义会议"]
        ],
        [
            ["-请选择-"],
            ["-请选择-",, "济南2"],
            ["-请选择-",, "青岛2"]
        ]
    ]
    //设置一个省的公共下标
    var pIndex = -1;
    var preEle = document.getElementById("pre");
    var cityEle = document.getElementById("city");
    var  areaEle = document.getElementById("area");
    var wayEle = document.getElementById("way");
    //先设置省的值
    for (var i = 0; i < pres.length; i++) {
        //声明option.<option value="http://www.mamicode.com/pres[i]">Pres[i]</option>
        var op = new Option(pres[i], i);
        //添加
        preEle.options.add(op);
    }
    function chg(obj) {
        if (obj.value =http://www.mamicode.com/= -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;
        wayEle.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);
        }
     
    }
    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);
        }
    }

    function chg3(obj) {
        var val = obj.selectedIndex;
        var as = wayareas[pIndex][val];
        wayEle.options.length = 0;
        for (var i = 0; i < as.length; i++) {
            var op = new Option(as[i], i);
            wayEle.options.add(op);
        }
    }
</script>
</html>

 

js 四级联动


联系
我们