selectBox を select によって、選択します。##

1.一見単純そうなのに手強いかった。
2.多段連装も可能。
3.発想の根拠。地域ごとに選択させれば、日本の北海道や東京23区を簡単に選択できるのではないかと。
まずは、全体の把握。css,js 内包。
test.html
<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
<style>
    .parent:active .child {
        display: block; /* 親がアクティブなときに子を表示("-"は演算命令なので命名しない事。) */

    }
    .form_container {
        display: flex;
        background-color: aquamarine;
        margin: 20px 0;
    }  
    .form_container2 form {
        display: none;
        flex-direction: column;
        margin-right: 20px;
        padding: 10px;
        border: 1px solid #08a522;
        background-color: #f9f9f9;
    }  
    .form_container #form1 {
        display: none; /* 初期状態で非表示 */
    }
    .form_container #form2 {
        display: none; /* 初期状態では非表示 */
    }
    .form_container #form_selector1 {
        display: block; /* 初期状態では表示 */
    }
    .form_container #form_selector2 {
        display: none; /* 初期状態では非表示 */
    }
    .form_container #form3 {
        display: none; /* 初期状態では非表示 */
    }
    #free {
        display: none;
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #f0f0f0;
    }
</style>
    </head>
<body>
    <h1>Welcome to the Test Page</h1>
    <p>This is a simple HTML page for testing purposes.</p>
 <label for="form_selector">フォームを選択してください:</label>
<table><tr><td>
 <form name="form0">
    <select id="form_selector" name="form_selector" onchange="handleChange(event)">
        <option value="">選択してください</option>
        <option value="form1">フォーム1北海道</option>
        <option value="form2">フォーム2東京</option>
        <option value="form3">フォーム3その他の県</option>
    </select>
</form></td>
<td><form name="form1" class="form_container">
  <div id="form1">
    <select id="form_selector1" name="form_selector1" onchange="handleChange(event)">
        <option value="">網走刑務所以外を選択してください</option>
        <option value="form1">フォーム12</option>
        <option value="form2">フォーム22</option>
        <option value="form3">フォーム32</option>
        <option value="刑務所">網走刑務所</option>
    </select>
    <!-- 理想的にはform1~は0のセレクトになるセレクター別のテーブルインナーになる。-->
    <select id="form_selector2" name="form_selector2" onchange="handleChange(event)">
        <option value="">東京23区を選択してください</option>
        <option value="form1">フォーム12</option>
        <option value="form2">フォーム22</option>
        <option value="form3">フォーム32</option>
    </select>
    <h3>フォーム1</h3>
    <input id="input_text1" type="text" value="フォーム1の入力">
  </div>
  </form></td>
<td><form name="form2" class="form_container">
  <div id="form2">
    <h3 style="color:brown;">フォーム2</h3>
    <input id="input_text2" type="text" value="フォーム2の入力">
  </div>
</form></td>
<td><form name="form3" class="form_container">
  <div id="form3">
    <h3>フォーム3</h3>
    <input id="input_text3" type="text" value="フォーム3の入力">
  </div>
</form></td></tr></table><br>
<div id = "free">
    <h2>自由入力欄</h2>
    <textarea id="free_text" rows="4" cols="50">自由バンザーイ。ここに自由に刑務所に入ってください。</textarea>
</div>
<script>
    // フォーム選択のイベントリスナーを追加
    document.querySelector('#form_selector').addEventListener('change', handleChange); // フォーム0のセレクトボックスの変更イベントを追加
    var form = document.forms['form0']; // name="form0" のフォームを取得  ここが一番に動く。表示させ無くしたらダメ。
    var myForm1 = document.forms['form1']; // name="form1" のフォームを取得
    var myForm2 = document.forms['form2']; // name="form2" のフォームを取得
    var myForm3 = document.forms['form3']; // name="form3" のフォームを取得
    var formSelector = myForm1.querySelector('#form_selector'); // id="form_selector" のセレクト要素を取得　　(1)
    var formSelector1 = myForm1.querySelector('#form_selector1'); // id="form_selector1" のセレクト要素を取得 (2)
    var formSelector2 = myForm1.querySelector('#form_selector2'); // id="form_selector2" のセレクト要素を取得 // (3)
    // フォームの選択状態を保持する変数
    var select1 = ""; // フォーム1の選択状態を保持
    var select2 = ""; // フォーム2の選択状態を保持
    var inputText1 = myForm1.querySelector('#input_text1'); // フォーム1の入力フィールドを取得
    var inputText2 = myForm2.querySelector('#input_text2'); // フォーム2の入力フィールドを取得
    var inputText3 = myForm3.querySelector('#input_text3'); // フォーム3の入力フィールドを取得
    var form1 = document.getElementById('form1'); // id="form1" の要素を取得
    var form2 = document.getElementById('form2'); // id="form2" の要素を取得
    var form3 = document.getElementById('form3'); // id="form3" の要素を取得
    var inputText1Color = inputText1.style.color; // フォーム1の入力フィールドの文字色を取得
    var inputText2Color = inputText2.style.color; // フォーム2の入力フィールドの文字色を取得
    var inputText3Color = inputText3.style.color; // フォーム3の入力フィールドの文字色を取得  
    if (form =="form1" && (formSelector1 || formSelector2)) {
        formSelector1.addEventListener('change', handleChange); // フォーム1のセレクトボックスの変更イベントを追加
        formSelector2.addEventListener('change', handleChange); // フォーム2のセレクトボックスの変更イベントを追加
    }
    select1 = "選んでください";
    select2 = "選んでください";
    var select3 = "選んでください";
    // セレクトボックスの変更イベントを処理する関数
    function handleChange(event) {
        event.preventDefault(); // Prevent form submission
        var form = this.form; // Access the parent form
        alert(`Selected form: ${event.target.value}`);
        if (event.target.value == "選んでください") {
            alert("フォームが選択されていません。これしか動かない。");
            inputText1.style.color = inputText1Color; // フォーム1の入力フィールドの文字色を元に戻す
            inputText1.value = ''; // フォーム1の入力フィールドの値を設定
            inputText2.value = ''; // フォーム2の入力フィールドの値を設定
            inputText3.value = ''; // フォーム3の入力フィールドの値を設定
            //document.getElementById('form0').style.display = 'block'; // form0を表示入力できなくなる
            document.getElementById('form_selector').style.display = 'block'; // form_selectorを表示
            document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
            document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            document.getElementById('form1').style.display = 'none'; // form1を非表示
            document.getElementById('form2').style.display = 'none'; // form2を非表示
            document.getElementById('form3').style.display = 'none'; // form3を非表示
            document.getElementById('free').style.display = 'none'; // 自由入力欄を非表示
        } else if (event.target.value == "form0") {
            var selectvalue = document.getElementById('form_selector').value;
            alert("selectvalue: " + selectvalue + " フォームを選択してください。");
            var selectvalue1 = document.getElementById('form_selector1').value;
            alert("selectvalue1: " + selectvalue1 + " フォームを選択してください。");
            var selectvalue2 = document.getElementById('form_selector2').value;
            alert("selectvalue2: " + selectvalue2 + " フォームを選択してください。");
            inputText1.style.color = 'red'; // フォーム1の入力フィールドの文字色を赤に設定
            inputText1.value = ''; // フォーム1の入力フィールドの値を設定
            inputText2.value = ''; // フォーム2の入力フィールドの値を設定
            inputText3.value = ''; // フォーム3の入力フィールドの値を設定
            document.getElementById('free').style.display = 'block';
        }else if (event.target.value =="form1") {
            var selectvalue = document.getElementById('form_selector1').value;
            document.getElementById('form1').style.display = 'block'; 
            document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
            alert("selectvalue: " + selectvalue + " フォームを選択してください。");
            var selectvalue1 = document.getElementById('form_selector1').value;
            alert("selectvalue1: " + selectvalue1 + " フォームを選択してください。");
            var selectvalue2 = document.getElementById('form_selector2').value;
            alert("selectvalue2: " + selectvalue2 + " フォームを選択してください。");
            document.getElementById('free').style.display = 'none'; // 自由入力欄を非表示
            inputText1.style.color = 'red'; // フォーム1の入力フィールドの文字色を赤に設定
            inputText1.value = ''; // フォーム1の入力フィールドの値を設定
            inputText2.value = ''; // フォーム2の入力フィールドの値を設定
            inputText3.value = ''; // フォーム3の入力フィールドの値を設定
            document.getElementById('form2').style.display = 'none'; // form2を非表示
            document.getElementById('form3').style.display = 'none'; // form3を非表示
            document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
        }else if (event.target.value =="form2") {   
            var selectvalue = document.getElementById('form_selector').value;
            document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
            document.getElementById('form_selector2').style.display = 'block'; // form_selector2を表示
            document.getElementById('form1').style.display = 'block'; // form1を表示 
            document.getElementById('form2').style.display = 'block';
            alert("selectvalue: " + selectvalue + " フォームを選択してください。");
            var selectvalue1 = document.getElementById('form_selector1').value;
            alert("selectvalue1: " + selectvalue1 + " フォームを選択してください。");
            var selectvalue2 = document.getElementById('form_selector2').value;
            alert("selectvalue2: " + selectvalue2 + " フォームを選択してください。");
            document.getElementById('free').style.display = 'none'; // 自由入力欄を非表示
            inputText1.style.color = 'red'; // フォーム1の入力フィールドの文字色を赤に設定
            inputText1.value = ''; // フォーム1の入力フィールドの値を設定
            inputText2.value = ''; // フォーム2の入力フィールドの値を設定
            inputText3.value = ''; // フォーム3の入力フィールドの値を設定
            document.getElementById('form3').style.display = 'none'; // form3を非表示
        }else if (event.target.value =="form3") {
            var selectvalue = document.getElementById('form_selector').value;
            alert("selectvalue: " + selectvalue + " フォームを選択してください。");
            var selectvalue1 = document.getElementById('form_selector1').value;
            alert("selectvalue1: " + selectvalue1 + " フォームを選択してください。");
            var selectvalue2 = document.getElementById('form_selector2').value;
            alert("selectvalue2: " + selectvalue2 + " フォームを選択してください。");
            inputText1.style.color = 'red'; // フォーム1の入力フィールドの文字色を赤に設定
            inputText1.value = ''; // フォーム1の入力フィールドの値を設定
            inputText2.value = ''; // フォーム2の入力フィールドの値を設定
            inputText3.value = ''; // フォーム3の入力フィールドの値を設定
            document.getElementById('form1').style.display = 'block'; // form1を表示
            document.getElementById('form2').style.display = 'block'; // form2を非表示
            document.getElementById('form3').style.display = 'block'; // form3を非表示
            document.getElementById('form_selector1').style.display = 'none'; // form_selector1を表示
            document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
        } else if (event.target.value == "刑務所") {
            var selectvalue = document.getElementById('free').style.display = 'block'; // 自由入力欄を表示
            document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
            document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            alert("selectvalue: " + selectvalue + " フォームを選択してください。");
            var selectvalue1 = document.getElementById('form_selector1').value;
            alert("selectvalue1: " + selectvalue1 + " フォームを選択してください。");
            var selectvalue2 = document.getElementById('form_selector2').value;
            alert("selectvalue2: " + selectvalue2 + " フォームを選択してください。");
            inputText1.style.color = 'red'; // フォーム1の入力フィールドの文字色を赤に設定
            inputText1.value = ''; // フォーム1の入力フィールドの値を設定
            inputText2.value = ''; // フォーム2の入力フィールドの値を設定
            inputText3.value = ''; // フォーム3の入力フィールドの値を設定
            document.getElementById('form1').style.display = 'none'; // form1を表示
            document.getElementById('form2').style.display = 'none'; // form2を非表示
            document.getElementById('form3').style.display = 'none'; // form3を非表示
            document.getElementById('form_selector1').style.display = 'none'; // form_selector1を表示
            document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
        } else if(form == "form1" || event.target.value == "刑務所") {
             document.getElementById('free').style.display = 'block'; // 自由入力欄を表示
            alert("フォームが選択されていません。空が入った状態です。");
        }
        var selectvalue = formSelector.value; // フォーム0のセレクトボックスの値を取得
        var selectvalue1 = formSelector1.value; // フォーム1のセレクトボックスの値を取得
        var selectvalue2 = formSelector2.value; // フォーム2のセレクトボックスの値を取得
        // フォーム0のセレクトボックスの値を取得
        if (form == "form0" && formSelector != "") {
            select1 = formSelector.value; // フォーム0のセレクトボックスの値を取得
            select2 = ""; // フォーム2のセレクトボックスの値を初期化
        }
        if (myForm1 == "form1" && formSelector1 != "") {
            select2 = formSelector1.value; // フォーム1のセレクトボックスの値を取得
        }

        if (selectvalue !== "") {
            document.getElementById('form1').style.display = 'none'; // form1を非表示
            document.getElementById('form2').style.display = 'none'; // form2を非表示
            document.getElementById('form3').style.display = 'none'; // form3を非表示
            if (form == "form0") {
                select1 = selectvalue; // フォーム1の選択をリセット 0で1が確定　まず0で1段目のセット
                select2 = "選んでください"; // フォーム2の選択をリセット
                if (selectvalue == "form1") {
                    document.getElementById('form1').style.display = 'block'; // form1を表示
                    document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                    document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
                    document.getElementById('form2').style.display = 'none'; // form2を非表示
                    document.getElementById('form3').style.display = 'none'; // form3を非表示
                }
                    inputText1.style.color = 'red'; // フォーム1の入力フィールドの文字色を赤に設定
                    inputText1.value = ''; // フォーム1の入力フィールドの値を設定
                    inputText2.value = ''; // フォーム2の入力フィールドの値を設定
                    inputText3.value = ''; // フォーム3の入力フィールドの値を設定
                } 
                if (selectvalue === "form2") {
                    document.getElementById('form1').style.display = 'block'; // form1を表示
                    document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                    document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
                    document.getElementById('form2').style.display = 'none'; // form2を非表示
                    document.getElementById('form3').style.display = 'none'; // form3を非表示
                } 
                if (selectvalue === "form3") {
                    document.getElementById('form1').style.display = 'none'; // form1を非表示
                    document.getElementById('form2').style.display = 'none'; // form2を非表示
                    document.getElementById('form3').style.display = 'block'; // form3を表示
                } else {}   // 拡張の時やわ。。。
            if (select1 == "form1") {
                select1 = selectvalue; // フォーム1の選択をリセット 0で1が確定　まず0で1段目のセット
                document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            } else if (select1 == "form2") {
                select1 = selectvalue; // フォーム1の選択をリセット 0で1が確定　まず0で1段目のセット
                document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
                document.getElementById('form_selector2').style.display = 'block'; // form_selector2を表示
            }else if (select1 == "form3") {
                select1 = selectvalue; // フォーム1の選択をリセット 0で1が確定　まず0で1段目のセット
                document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            }else if (select1 != selectvalue) { //0の変更があったら
                select1 = selectvalue; // フォーム1の選択をリセット 0で1が確定　まず0で1最初が変わった。
                document.getElementById('form_selector1').style.display = 'none'; // form_selector1を表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            }
            if (select2 != "選んでください") { // 1の変更があったら
                select1 = selectvalue; // フォーム1の選択をリセット
                select2 = "選んでください"; // フォーム2の選択をリセット
                document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            }
        }        
        if (selectvalue1 !== "") {
            if (myForm1 == "form1" && selectvalue1 == "form1") {  // 1 のセレクトが変わった。1から2へ
                select2 = selectvalue1; // フォーム1の選択をリセット 0で1が確定　まず0で1段目のセット
                document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            }else if (myForm1 == "form2" && selectvalue1 == "form2") { // 1 のセレクトが変わった。1から2へ
                select2 = selectvalue2; // フォーム2の選択をリセット
                document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
                document.getElementById('form_selector2').style.display = 'block'; // form_selector2を表示
            } else if (myForm1 == "刑務所" && selectvalue1 == "刑務所") { // 1 のセレクトが変わった。1から2へ
                select2 = selectvalue1; // フォーム2の選択をリセット
                document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            } else if (myForm1 == "刑務所" && selectvalue1 == "刑務所") { // 1 のセレクトが変わった。1から2へ
                select1 = selectvalue1; // フォーム1の選択をリセット
                select2 = "選んでください"; // フォーム2の選択をリセット
                document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
                document.getElementById('form_selector2').style.display = 'block'; // form_selector2を表示
            }else if (select2 != selectvalue1) { // 1の変更があったら
                select2 = selectvalue1; // フォーム2の選択をリセット 
            }
        }   
        alert("textに入力してください: " + selectvalue);
        if (selectvalue2 !== "") {
            if (myForm2 == "form1" && selectvalue2 == "form1") {  // 2 のセレクトが変わった。1から2へ
                select3 = selectvalue2; // フォーム1の選択をリセット 0で1が確定　まず0で1段目のセット
                document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            }else if (myForm2 == "form2" && selectvalue2 == "form2") { // 2 のセレクトが変わった。1から2へ
                select3 = selectvalue2; // フォーム2の選択をリセット
                document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
                document.getElementById('form_selector2').style.display = 'block'; // form_selector2を表示
            } else if (myForm2 == "form3" && selectvalue2 == "form3") {   // 2 のセレクトが変わった。1から2へ
                select3 = selectvalue2; // フォーム3の選択をリセット
                document.getElementById('form_selector1').style.display = 'none'; // form_selector1を非表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            } else if (myForm2 == "刑務所" && selectvalue2 == "刑務所") { // 2 のセレクトが変わった。1から2へ
                select3 = selectvalue2; // フォーム3の選択をリセット
                document.getElementById('form_selector1').style.display = 'block'; // form_selector1を表示
                document.getElementById('form_selector2').style.display = 'none'; // form_selector2を非表示
            } else if (select3 != selectvalue) { // 1の変更があったら
                select3 = selectvalue; // フォーム3の選択をリセット

            }
        
        }
    }
</script>
</body>
</html>
出来たら嬉しくて、ション便もせずに、来たわ。
苦労させられたわ。
まぁ、細かいところは任せるので、参考にテストしてみてください。
またね。