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