原生js实现三级联动

学习自于 http://blog.csdn.net/Elenal/article/details/51493510

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <form action="" name="theform">
                <select name="province" onchange="getCity()">
                    <option value = "0">请选择所在的省份</option>
                    <option value="1">浙江省</option>
                    <option value="2">山东省</option>
                    <option value="3">广东省</option> 
                    <option value="4">甘肃省</option> 
                </select>
        
                <select id="city" onchange="getQu()">
                    <option value = "0">请选择所在的城市</option>
                </select>
        
                <select name = "qu">
                    <option value = "0">请选择所在的县区</option>
                </select>
        
        </form>
        
    <script>
    
//按照省份的下拉列表的顺序定义二维数组  将城市列表对应到省份下
var city=[
        ["杭州市","温州市","宁波市","绍兴市"],//浙江省
        ["济南市","青岛市","济宁市","潍坊市"],//山东省
        ["广州市","潮阳","澄海","潮州"],//广东省
        ["兰州市","白银","敦煌","定西"]//甘肃省
    ];

    //县区数组
    var qu=[
        [
                ["杭州一区","杭州二区"],
                ["温州一区","温州二区"],
                ["宁波一区","宁波二区"],
                ["绍兴一区","绍兴二区"]
        ],

        [
                ["济南一区","济南二区"],
                ["青岛一区","青岛二区"],
                ["济宁一区","济宁二区"],
                ["潍坊一区","潍坊二区"],
        ],

        [
                ["广州一区","广州二区"],
                ["潮阳一区","潮阳二区"],
                ["澄海一区","澄海二区"],
                ["潮州一区","潮州二区"],
        ],

        [
                ["兰州一区","兰州二区"],
                ["白银一区","白银二区"],
                ["敦煌一区","敦煌二区"],
                ["定西一区","定西二区"],
        ]

    ];
    var getProvince = document.forms['theform'].province;
    var City = document.forms[0].city;
    var Qu = document.forms[0].qu;
    function getCity(){
        // 初始化
        Qu.length = 1;
        City.length = 1;
        // 获得 省份选择的项（索引值，0开始）
        var getSelectIndex = getProvince.selectedIndex;
        // 匹配选择省下面的 市区
        var proCity = city[getSelectIndex-1]; // 
        console.log( proCity)
        for( var i=0; i<proCity.length; i++){
            City[i+1] = new Option(proCity[i],getSelectIndex)
        }
    }

    function getQu(){
        var getSelectIndex = getProvince.selectedIndex;  // 省
        var getCitySelectedIndex = City.selectedIndex; // 市
        console.log( getCitySelectedIndex )
        var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1];
        console.log( cityQu )

        for( var i=0; i<cityQu.length; i++){
            Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex)
        }
    }
</script>
原生js实现三级联动

学习 自 于 http://blog.csdn.net/Elenal/article/details/51493510

学习自于 http://blog.csdn.net/Elenal/article/details/51493510
