原生js实现三级联动

Posted AR13

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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实现三级联动的主要内容,如果未能解决你的问题,请参考以下文章

js三级联动

城市三级联动 AJAX-原生js封装

原生js原生js的省市区三级联动

地址的三级联动(原生js)

原生的三级联动下拉框

PHP ajax 实现三级联动