js三级省市区选择

Posted 2020-06-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于js三级省市区选择的主要内容，如果未能解决你的问题，请参考以下文章

JS(JQuery) 省市区三级联动下拉选择