js三级省市区选择

时间：2023-03-09 20:42:37
js三级省市区选择 
<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Province_three</title>

<style>

*{

    margin: 0;

    padding: 0;

    list-style: none;

    font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei";

}

body{

    padding: 50px;

}

select{

    margin-right: 5px;

}

</style>

</head>

<body>

<script>

window.onload = function(){

    //

    var aProvince = [

        "浙江省",

        "江苏省",

        "广东省"

    ]

    var aCity = [

        ["杭州市","宁波市","舟山市","温州市","绍兴市"],

        ["苏州市","南京市"],

        ["广州市","深圳市"]

    ]

    var aArea = [

        [

            ["滨江区","西湖区","上城区"],

            ["海曙区","江东区","鄞州区","江北区"],

            ["定海区"],

            ["温岭区"],

            ["柯桥区"]

        ],

        [

            ["吴中区"],

            ["鼓楼区"]

        ],

        [

            ["越秀区","海珠区"],

            ["宝安区","龙岗区"]

        ]

    ]

    //fn

    function fnAddOption(innerH,target,isClear){

        var oOption = document.createElement("option");

        oOption.value = innerH;

        oOption.innerHTML = innerH;

        //clearOptions

        if(isClear){

            var tLength = target.children.length;

            for(var i=0; i<tLength; i++){

                target.removeChild(target.children[0]);

            }

        }

        target.appendChild(oOption);

    }

    function fnGetProvince(ele,initP,initC,initA){

        ele.innerHTML = '<select><option>--选择省--</option></select><select><option>--选择市--</option></select><select><option>--选择区--</option></select>';

        var oSelect1 = ele.getElementsByTagName("select")[0];

        var oSelect2 = ele.getElementsByTagName("select")[1];

        var oSelect3 = ele.getElementsByTagName("select")[2];

        for(var i=0; i<aProvince.length; i++){

            fnAddOption(aProvince[i],oSelect1);

            //initP

            if(typeof(initP)!="undefined" && initP == aProvince[i]){

                oSelect1.getElementsByTagName("option")[i+1].setAttribute("selected",true);

                onchangeS1();

                //initC

                if(typeof(initC)!="undefined"){

                    var oOptions = oSelect2.getElementsByTagName("option");

                    for(var j=0; j<oOptions.length; j++){

                        if(initC == oOptions[j].innerHTML){

                            oOptions[j].setAttribute("selected",true);

                            onchangeS2();

                            //initA

                            if(typeof(initA)!="undefined"){

                                var oOptions = oSelect3.getElementsByTagName("option");

                                for(var k=0; k<oOptions.length; k++){

                                    if(initA == oOptions[k].innerHTML){

                                        oOptions[k].setAttribute("selected",true);

                                    }

                                }

                            }

                        }

                    }

                }

            }

            //init end

        }

        //select1 onchange event

        function onchangeS1(){

            var sIndex = oSelect1.selectedIndex;

            fnAddOption("--选择市--",oSelect2,true);

            fnAddOption("--选择区--",oSelect3,true);

            if(sIndex==0){

                return;

            }

            for(var i=0; i<aCity[sIndex-1].length; i++){

                fnAddOption(aCity[sIndex-1][i],oSelect2);

            }

        }

        oSelect1.onchange = onchangeS1;

        //select2 onchange event

        function onchangeS2(){

            var sIndex = oSelect1.selectedIndex;

            var sCityIndex = oSelect2.selectedIndex;

            fnAddOption("--选择区--",oSelect3,true);

            if(sCityIndex==0){

                return;

            }

            for(var i=0; i<aArea[sIndex-1][sCityIndex-1].length; i++){

                fnAddOption(aArea[sIndex-1][sCityIndex-1][i],oSelect3);

            }

        }

        oSelect2.onchange = onchangeS2;

    }

    //get fn

    var oDiv = document.getElementById("div1");

    fnGetProvince(oDiv,"广东省","深圳市","龙岗区");

}

</script>

<div id="div1"></div>

</body>

</html>

下面是二级省市选择：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Province_Two</title>

<style>

*{

    margin: 0;

    padding: 0;

    list-style: none;

    font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei";

}

body{

    padding: 50px;

}

select{

    margin-right: 5px;

}

</style>

</head>

<body>

<script>

window.onload = function(){

    //

    var aProvince = [

        "浙江省",

        "江苏省",

        "广东省"

    ]

    var aCity = [

        ["杭州市","宁波市","舟山市","温州市","绍兴市"],

        ["苏州市","南京市"],

        ["广州市","深圳市"]

    ]

    //fn

    function fnAddOption(innerH,target){

        var oOption = document.createElement("option");

        oOption.value = innerH;

        oOption.innerHTML = innerH;

        target.appendChild(oOption);

    }

    function fnGetProvince(ele){

        ele.innerHTML = '<select><option>--请选择--</option></select><select><option>--请选择--</option></select>';

        var oSelect1 = ele.getElementsByTagName("select")[0];

        var oSelect2 = ele.getElementsByTagName("select")[1];

        for(var i=0; i<aProvince.length; i++){

            fnAddOption(aProvince[i],oSelect1);

        }

        //select onchange event

        oSelect1.onchange = function(){

            var sIndex = oSelect1.selectedIndex;

            var sOption = oSelect1[sIndex];

            oSelect2.innerHTML="";

            if(sIndex==0){

                fnAddOption("--请选择--",oSelect2);

                return;

            }

            for(var i=0; i<aCity[sIndex-1].length; i++){

                fnAddOption(aCity[sIndex-1][i],oSelect2);

            }

        }

    }

    //get fn

    var oDiv = document.getElementById("div1");

    fnGetProvince(oDiv);

}

</script>

<div id="div1"></div>

</body>

</html>

相关文章