js realisiert die nicht auswählbare Dropdown-Box-Version der dreistufigen Verknüpfung von Provinzen, Städten und Bezirken

<div Klasse="Box">
        <section class="province">Provinz</section>
        <section class="city">Stadt</section>
        <section class="area">Bereich</section>
 
        <div Klasse="si">
        </div>
</div>

<Stil>
        .Kasten{
            Breite: 800px;
            Höhe: 50px;
            Rand: 20px automatisch;
            Hintergrundfarbe: rgb(48, 49, 48);
            Rahmenradius: 10px;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
        }
        .box Abschnitt{
            Anzeige: Inline-Block;
            Hintergrundfarbe: rgb(168, 165, 165);
            Flex-Wachstum: 1;
            Höhe: 30px;
            Rand rechts: 10px;
            Rand links: 10px;
            Rahmenradius: 5px;
            Zeilenhöhe: 30px;
            Polsterung links: 10px;
        }
        .box Abschnitt:hover{
            Cursor: Zeiger;
        }
        .si{
            Anzeige: keine;
        }
        .box .alle{
            Anzeige: Block;
            Breite: 740px;
            Hintergrundfarbe: rgb(211, 203, 203);
            Polsterung: 20px;
            Position: absolut;
            Rahmenradius: 10px;
            oben: 57px;
        }
        .box .alles:hover{
            Cursor: Zeiger;
        }
        .box .alle span{
            Anzeige: Inline-Block;
            Breite: 130px;
            Höhe: 30px;
            Schriftgröße: 13px;
            Polsterung links: 10px;
            Zeilenhöhe: 30px;
            Rahmenradius: 5px;
            Rand links: 10px;
            Rand: 1px durchgezogen #000;
            Hintergrundfarbe: weiß;
            Box-Größe: Rahmenbox;
            Rand oben: 10px;
        }
</Stil>

<Skript>
        // Inhalt abrufen var data = city_code // Dies sind meine Daten // Provinz, Stadt, Bezirk abrufen var province = document.querySelector(".province")
        var Stadt = document.querySelector(".Stadt")
        var Bereich = document.querySelector(".area")
 
        // Das versteckte div abrufen
        var si = document.querySelector(".si")
        
        Provinz.addEventListener("mouseover",Funktion(){
            si.classList.add("alle")
            //Wählen Sie die Provinz aus var html = ""
            var alle = document.querySelector(".alle")
            für(var i = 0;i<data.length;i++){
                const Provinzname = Daten[i].name
                const ProvinzID = Daten[i].code
                html += `<span id="${provinceID}">${provinceName}</span>`
            }
            all.innerHTML=html
 
            var spanAll = document.querySelectorAll("span")
            für(var j =0;j<spanAll.length;j++){
                spanAll[j].addEventListener("klicken",function(){
                    Provinz.innerHTML=dieser.innerText
                    Provinz.id=diese.id
 
                    html = ""
 
                    // Wähle eine Stadt für (var k = 0;k<data.length;k++){
                wenn (data[k].code===province.id) {
                    var Städte = Daten[k].Stadt
                    für(var i = 0;i<Stadt.Länge;i++){
                    html +=`<span id="${citys[i].code}">${citys[i].name}</span>`
                    }
                    all.innerHTML=html
                    var spanAll = document.querySelectorAll("span")
                    für(var j =0;j<spanAll.length;j++){
                        spanAll[j].addEventListener("klicken",function(){
                        stadt.innerHTML=dieser.innerText
                        city.id=diese.id
 
                        html = ""
 
                        //Bereich auswählen für(var k = 0; k<citys.length; k++){
                wenn (Städte[k].code===city.id) {
                    var Bereiche = Städte[k].Bereich
                    für(var i = 0;i<Bereiche.Länge;i++){
                    html +=`<span id="${areas[i].code}">${areas[i].name}</span>`
                    }
                    all.innerHTML=html
                    var spanAll = document.querySelectorAll("span")
                    für(var j =0;j<spanAll.length;j++){
                        spanAll[j].addEventListener("klicken",function(){
                        bereich.innerHTML = dieser.innerText
                        Bereich.id=diese.id
                        si.classList.remove("alle")                 
                        })               
                    }
                    brechen
                }
            }
 
                        })                
                    }
                    brechen
                }
            }    
 
 
                         
                })                
            }
            
 
        })
 
</Skript>