Kazunari-h
5/24/2019 - 4:54 AM

list.html

list.html
content_copyfile_download
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>都道府県のリスト</title>

</head>

<body>
    <script>
        window.onload = function () {

            // 都道府県のリスト
            let city = {}
            var nameList = [
                ["銀座", "渋谷", "新宿"],
                ["堺", "京橋", "梅田"],
                ["栄"],
            ];

            // 選択項目のリセット
            var initSelectBox = function () {
                var groupNum;
                // 選択したグループ番号を取得
                for (var i = 0; i < document.getElementById('group').options.length; i++) {
                    if (document.getElementById('group').options[i].selected) {
                        groupNum = i;
                    }
                }
                // 名前の選択項目を初期化
                for (var i = 0; i < document.getElementById('list').options.length; i++) {
                    document.getElementById('list').options[i] = null;
                }

                // グループに所属している名前を選択項目にセット
                for (var i = 0; i < nameList[groupNum].length; i++) {
                    document.getElementById('list').options[i] = new Option(nameList[groupNum][i]);
                }
                document.getElementById('list').options[0].selected = true;
            }

            // 選択したグループが変更されたら名前の選択項目をリセット
            document.getElementById('group').onchange = function () {
                initSelectBox();
            }

            // ページを読み込んだ時に選択項目をリセット
            initSelectBox();
        }
    </script>
    <form action="#">

        <!-- グループ名を選択 -->
        <select name="group" id="group">
            <option value="group1">東京</option>
            <option value="group2">大阪</option>
            <option value="group3">名古屋</option>
        </select>

        <!-- 名前を選択 -->
        <select name="list" id="list">
            <option value=""></option>
        </select>
    </form>

</body>

</html>