やっぱり、copilot 賢いわ。
省エネ版です。
多くある、東京都とかは「中央、東西南北、その他」テキストで入れたい人、とかで良いと、おもいます。
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
.parent:active .child {
display: block; /* 親がアクティブなときに子を表示("-"は演算命令なので命名しない事。) */
}
#form_selector1 {
display: none;
}
#form_selector2 {
display: none;
}
</style>
</head>
<body>
<select id="form_selector" onchange="handleChange(event)">
<option value="select">選択</option>
<option value="form1">フォーム1</option>
<option value="form2">フォーム2</option>
</select>
<select id="form_selector1" onchange="handleChange1(event)">
<option value="form1">フォーム3</option>
<option value="form2">フォーム4</option>
</select>
<select id="form_selector2" onchange="handleChange2(event)">
<option value="form1">フォーム31</option>
<option value="form2">フォーム32</option>
</select>
<script>
function handleChange(event) {
const selected = event.target.value;
if (selected == "form1"){
document.getElementById('form_selector1').style.display = 'block'; // form3を非表示
document.getElementById('form_selector2').style.display = 'none';
} else if (selected == "form2"){
document.getElementById('form_selector1').style.display = 'none'; // form3を非表示
document.getElementById('form_selector2').style.display = 'block';
} else {
document.getElementById('form_selector1').style.display = 'none'; // form3を非表示
document.getElementById('form_selector2').style.display = 'none';
}
console.log("選ばれた値:", selected);
}
function handleChange1(event) {
const selected1 = event.target.value;
console.log("選ばれた値:", selected1);
}
function handleChange2(event) {
const selected2 = event.target.value;
console.log("選ばれた値:", selected2);
}
</script>
</body>
</html>
それでは。