省市区三级联动

需求

通过三个下拉菜单的联动来实现,第一级下拉菜单为省级,第二级下拉菜单为市级,第三级下拉菜单为区级。当点击第一级下拉菜单,第二级菜单的内容会自动匹配;选择第二级菜单时,第三级菜单会自动生成。当我取消上一级菜单的选项时,次一级选项会自动消失。

原理

先实现省市之间的,用for遍历省数组,给省下拉菜单赋值。给省数组绑定onchange事件,当菜单内容改变时,设置数组初始长度,默认索引值,嵌套市的for循环,根据省数组的下标,形成对应关系,遍历市数组,给市下拉菜单赋值。市与区类推。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        select{
            width: 100px;
            text-align: center;
            height: 25px;
            margin-right: 10px;
            border-radius: 10px
        }

    style>
head>

<body>
    <select name="province" id="province"><option value="">请选择  - - -option>
    select>
    <select name="" id="city"><option value="">请选择  - - -option>
    select>
    
    <select name="" id="region"><option value="">请选择  - - -option>
    select>
    <script>
        window.onload=function(){
        var province=document.getElementById("province")
        var city=document.getElementById("city")
        var region=document.getElementById("region")
        var provinceArr=["江苏","江西"]
        var cityArr=[["徐州市","扬州市"],["上饶","南昌","景德镇"]]
        var regionArr=[[["铜山区","鼓楼区"],["广陵区","邗江区"]],[["乐平市","昌江区"],["鄱阳县","广信区"],["西湖区","东湖区"]]]
        var proIndex=-1
       for(var i=0;i<provinceArr.length;i++){
        province.options.add(new Option(provinceArr[i]))
       }
       
      
       province.onchange=function getcity(){
        // if(provOp.indexOf===0){
        //     for(let m=0;m
        //     var cityOp=document.createElement("option")
        //     cityOp.innerHTML=cityArr[0][m]
        //     city.appendChild(cityOp)
        //     }
        // }else{
        //     for(let n=0;n
        //     var cityOp=document.createElement("option")
        //     cityOp.innerHTML=cityArr[1][n]
        //     city.appendChild(cityOp)
        //     }
        // }
            city.options.length=1
            region.options.length=1
            proIndex=this.selectedIndex-1
            
            
            if(proIndex>-1){
                for(var m=0;m<cityArr[proIndex].length;m++){
                // for(let n=0;n
                //     var regionOp=document.createElement("option")
                //     regionOp.innerHTML=regionArr[i][m][n]
                //     region.appendChild(regionOp)
                // }
                city.options.add(new Option(cityArr[proIndex][m]))
                // var cityOp=document.createElement("option")
                // cityOp.innerHTML=cityArr[i][m]
                // city.appendChild(cityOp)
            }
        //     city.onchange = function getQuxian() {
        // quxian.options.length = 1;
        // var cityIndex = this.selectedIndex - 1;
        // if(cityIndex > -1) {
        //     for(var i = 0; i < arr_quxian[proIndex][cityIndex].length; i++) {
        //         quxian.options.add(new Option(arr_quxian[proIndex][cityIndex][i]));
        //     }
        // }      

            }
            
            
        }
        city.onchange=function getregion(){
            region.options.length=1
            var cityIndex=this.selectedIndex-1
            if(cityIndex>-1){
                for(var i=0;i<regionArr[proIndex][cityIndex].length;i++){
                    region.options.add(new Option(regionArr[proIndex][cityIndex][i]))
                }
            }
        }
        
    }

       
        
        
    script>
body>

html>

省市区三级联动视频

你可能感兴趣的:(js,javascript,前端)