Kazunari-h/list.html

## list.html
<!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>
	<!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>