`
zx_00
  • 浏览: 5633 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

省市区三级联动

三级联动联动菜单省市区联动 
阅读更多

一个省市区三级联动菜单

 

<script>

        var myproc = ["省1","省2","省3","省4"];

        var mycity = new Array();

        mycity[0] = ["省1市1","省1市2","省1市3","省1市4"];

        mycity[1] = ["省2市1","省2市2","省2市3"];

        mycity[2] = ["省3市1","省4市2"];

        mycity[3] = ["省4市1","省4市2"];

 

        var myregion = new Array();

        myregion[0]=new Array();

        myregion[1]=new Array();

        myregion[2]=new Array();

        myregion[3]=new Array();

        myregion[0][0]=["省1市1区1","省1市1区2"];

        myregion[0][1]=["省1市2区1","省1市2区2"];

        myregion[0][2]=["省1市3区1","省1市3区2"];

        myregion[0][3]=["省1市4区1","省1市4区2"];

        myregion[1][0]=["省2市1区1","省2市1区2"];

        myregion[1][1]=["省2市2区1","省2市2区2"];

        myregion[1][2]=["省2市3区1","省2市3区2"];

        myregion[2][0]=["省3市1区1","省3市1区2"];

        myregion[2][1]=["省3市2区1","省3市2区2"];

        myregion[3][0]=["省4市1区1","省4市1区2"];

        myregion[3][1]=["省4市2区1","省4市2区2"];

 

        function addproc(){

            var proc = document.getElementById("proc");

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

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

                var city = document.createTextNode(myproc[i]);

                op.appendChild(city);

                proc.appendChild(op);

            }

        }

 

        function selproc(){

            var proc = document.getElementById("proc");

            var city = document.getElementById("city");

            var region = document.getElementById("region");

            city.options.length=1;

            region.options.length=1;

            if(proc.value=="-1"){

                document.getElementById("mytxt").value="";

            }else{

                var num = proc.options.selectedIndex;

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

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

                    var city1 = document.createTextNode(mycity[num-1][i]);

                    op.appendChild(city1);

                    city.appendChild(op);

                }

            }

        }

 

        function selcity(){

            var proc = document.getElementById("proc");

            var city = document.getElementById("city");

            var region = document.getElementById("region");

            region.options.length=1;

            if(proc.value=="-1"){

                document.getElementById("mytxt").value="";

            }else{

                var num = proc.options.selectedIndex;

                var n  = city.options.selectedIndex;

                for(var i=0; i<myregion[num-1][n-1].length; i++){

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

                    var r = document.createTextNode(myregion[num-1][n-1][i]);

                    op.appendChild(r);

                    region.appendChild(op);

                }

            }

        }

    </script>

</head>

<body onload="addproc()">

选择省市地区：

<select id="proc" name="proc" onchange="selproc()">

    <option value="-1">--请选择省份--</option>

 

</select>

<select id="city" name="city" onchange="selcity()">

    <option value="-1">--请选择城市--</option>

</select>

<select id="region" name="region"  onchange="selregion()">

    <option value="-1">--请选择地区--</option>

</select>

分享到：
| 文字从右到左滚动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics