jsは、州、市、地区の3レベルのリンクの非選択ドロップダウンボックスバージョンを実現します。

<div class="box">
        <section class="province">州</section>
        <section class="city">都市</section>
        <section class="area">エリア</section>
 
        <div class="si">
        </div>
</div>

<スタイル>
        。箱{
            幅: 800ピクセル;
            高さ: 50px;
            マージン: 20px 自動;
            背景色: rgb(48, 49, 48);
            境界線の半径: 10px;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
        }
        .box セクション{
            表示: インラインブロック;
            背景色: rgb(168, 165, 165);
            フレックス成長: 1;
            高さ: 30px;
            右マージン: 10px;
            左マージン: 10px;
            境界線の半径: 5px;
            行の高さ: 30px;
            左パディング: 10px;
        }
        .boxセクション:hover{
            カーソル: ポインタ;
        }
        .si{
            表示: なし;
        }
        .box .all{
            表示: ブロック;
            幅: 740ピクセル;
            背景色: rgb(211, 203, 203);
            パディング: 20px;
            位置: 絶対;
            境界線の半径: 10px;
            上: 57px;
        }
        .box .all:hover{
            カーソル: ポインタ;
        }
        .box .all span{
            表示: インラインブロック;
            幅: 130ピクセル;
            高さ: 30px;
            フォントサイズ: 13px;
            左パディング: 10px;
            行の高さ: 30px;
            境界線の半径: 5px;
            左マージン: 10px;
            境界線: 1px実線 #000;
            背景色: 白;
            ボックスのサイズ: 境界線ボックス;
            上マージン: 10px;
        }
</スタイル>

<スクリプト>
        // コンテンツを取得 var data = city_code // これは私のデータです // 州、都市、地区を取得 var Province = document.querySelector(".province")
        var city = document.querySelector(".city")
        var area = document.querySelector(".area")
 
        // 隠しdivを取得する
        var si = document.querySelector(".si")
        
        州.addEventListener("マウスオーバー",関数(){
            si.classList.add("すべて")
            // 州を選択 var html = ""
            var all = document.querySelector(".all")
            for(var i = 0;i<data.length;i++){
                const 州名 = データ[i].名前
                const 州ID = データ[i].コード
                html += `<span id="${provinceID}">${provinceName}</span>`
            }
            すべて.innerHTML=html
 
            var spanAll = document.querySelectorAll("span")
            (var j =0;j<spanAll.length;j++){
                spanAll[j].addEventListener("クリック",function(){
                    州.innerHTML=this.innerText
                    州ID=このID
 
                    html = ""
 
                    // 都市を選択 for(var k = 0;k<data.length;k++){
                if (data[k].code===province.id) {
                    var citys = データ[k].city
                    for(var i = 0;i<citys.length;i++){
                    html +=`<span id="${citys[i].code}">${citys[i].name}</span>`
                    }
                    すべて.innerHTML=html
                    var spanAll = document.querySelectorAll("span")
                    (var j =0;j<spanAll.length;j++){
                        spanAll[j].addEventListener("クリック",function(){
                        city.innerHTML=this.innerText
                        都市ID=このID
 
                        html = ""
 
                        //エリアを選択 for(var k = 0; k<citys.length; k++){
                （citys[k].code===city.id）の場合{
                    var エリア = 都市[k].エリア
                    for(var i = 0;i<areas.length;i++){
                    html +=`<span id="${areas[i].code}">${areas[i].name}</span>`
                    }
                    すべて.innerHTML=html
                    var spanAll = document.querySelectorAll("span")
                    (var j =0;j<spanAll.length;j++){
                        spanAll[j].addEventListener("クリック",function(){
                        area.innerHTML = this.innerText
                        エリアID=このID
                        si.classList.remove("すべて")                 
                        })               
                    }
                    壊す
                }
            }
 
                        })                
                    }
                    壊す
                }
            }    
 
 
                         
                })                
            }
            
 
        })
 
</スクリプト>