投稿者: kanrisha

取り敢えず、スイッチの操作部種別を選んだら、それに対応する極数の候補を動的に絞り込むというJavaScriptのコードをChatGPT4oに作らせ動きました。最初は絞り込みの対応関係をJSONで書いてそれを読み込ませようとしたのですが、上手く動かないので結局元のHTML（blade）ファイルの中に書込む形になりました。あまり綺麗ではありませんが。しかしなかなか大変。書店でJavaScriptの本を何冊か立ち読みしてみましたが、現在選択されている候補を取得するとか、逆に候補を設定するとかはありましたが、動的な絞り込みまで載っている本は見つけられませんでした。
=========================================
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const switchOpPartSelect = document.querySelector(‘select[name=”switch_op_part_id”]’);
const switchPoleSelect = document.querySelector(‘select[name=”switch_pole_id”]’);

const allPoleOptions = [
@foreach ($switch_poles as $switch_pole)
{ id: “{{ $switch_pole->id }}”, text: “{{ $switch_pole->poles_number }}” },
@endforeach
];

switchOpPartSelect.addEventListener(‘change’, function() {
const selectedOpPartId = parseInt(this.value);
let filteredPoleOptions = [{ id: “1”, text: “-” }];

if ([2, 3, 5, 6].includes(selectedOpPartId)) {
filteredPoleOptions = filteredPoleOptions.concat(allPoleOptions.filter(option => [11, 12, 13, 14].includes(parseInt(option.id))));
} else if (selectedOpPartId === 4) {
filteredPoleOptions = filteredPoleOptions.concat(allPoleOptions.filter(option => [11, 12].includes(parseInt(option.id))));
} else if (selectedOpPartId === 7) {
filteredPoleOptions = [{ id: “1”, text: “-” }].concat(allPoleOptions);
} else {
filteredPoleOptions = [{ id: “1”, text: “-” }].concat(allPoleOptions);
}

switchPoleSelect.innerHTML = ”;
filteredPoleOptions.forEach(option => {
const newOption = document.createElement(‘option’);
newOption.value = option.id;
newOption.textContent = option.text;
switchPoleSelect.appendChild(newOption);
});
});

document.querySelector(‘form’).addEventListener(‘submit’, function() {
showLoadingMessage();
});

window.resetForm = function() {
document.querySelectorAll(‘select’).forEach(select => {
select.selectedIndex = 0;
});
document.querySelector(‘input[name=”type_name”]’).value = ”;

switchPoleSelect.innerHTML = ”;
[{ id: “1”, text: “-” }].concat(allPoleOptions).forEach(option => {
const newOption = document.createElement(‘option’);
newOption.value = option.id;
newOption.textContent = option.text;
switchPoleSelect.appendChild(newOption);
});
}
});

function showLoadingMessage() {
document.getElementById(‘loading-message’).style.display = ‘block’;
document.body.classList.add(‘loading’);
}
</script>

Webサイトでのデータベース検索で、各オプションの選択肢で、あるオプションのある選択肢を選んだ時に、その選択肢の時だけに存在する他の選択肢を絞り込む（存在しないものを消す）という処理について、以前ChatGPT4に聞いたのですが、回答はDBの各テーブルにリレーション（belong toなど）を設定して、それを使ってJavaScriptで候補を絞り込むだったのですが、良く考えるとそれだと必ずDBへのアクセスが生じ、レスポンスが落ちます。なので、要は候補同士の相関をJSONで書いておいて、それをHTMLを開く時に最初に読むやり方の方がいいと思って、再度ChatGPT4に聞いたら、その考え方は正しいようです。
================
私
以前、あるオプションの選択肢の選択によって他のオプションの選択肢を絞り込む（限定する）処理についてお聞きしましたが、その時はきちんとDBで各オプションのリレーションを設定して、JavaScriptで処理するということでした。そのやり方だとサーバーへの問い合わせが必ず発生しレスポンスが落ちるのではないでしょうか。簡易的なやり方として、絞り込みの関係になるオプション同士の連携をJSONなどで書いておいて、それをHTMLを読み込む最初に読み込んでおいて絞り込みに使う、というやり方はどうでしょうか？
ChatGPT
はい、オプションの選択肢を事前にJSON形式で定義しておき、クライアント側で絞り込みを行う方法は、有効なアプローチの一つです。これにより、サーバーへのリクエストを減らし、レスポンスの速度を向上させることができます。以下に、その具体的な方法を示します。
1. JSONファイルの作成
まず、オプション同士の関係を定義したJSONファイルを作成します。このファイルをサーバーの静的な場所に置き、HTMLページがロードされたときに読み込むようにします。
例：options.json

json
コードをコピーする
{
“product_op_parts”: {
“1”: {
“series_names”: [1, 2, 3],
“poles”: [1, 2]
},
“2”: {
“series_names”: [2, 3],
“poles”: [2, 3]
}
},
“product_series_names”: {
“1”: {
“poles”: [1]
},
“2”: {
“poles”: [2, 3]
}
}
}
2. HTMLとJavaScriptの修正
次に、HTMLとJavaScriptを修正して、JSONファイルを読み込み、選択肢を絞り込む処理を追加します。
例：create.blade.php
html
コードをコピーする

<style>
/* … 既存のスタイル … */<br />
</style>
<main></main>&nbsp;
<div align=”center”><big><big><big><big>ABC株式会社</big></big></big></big></div>
<div align=”center”><big><big>ABC Co., Ltd.</big></big></div>
<form action=”{{ route(‘product_name.search’) }}” method=”POST”>@csrf
<div>
<h3>製品名検索 <small><small>Switch Product Search</small></small></h3>
各オプションをプルダウンリストから選択して、ページ下部の［検索］ボタンをクリックしてください。
Please select each option from the pull-down lists and press the search button at the bottom of the page.
<label><b>操作部種別</b> Type of Operational Parts</label>
<select name=”product_op_part_id”>
<option value=””>選択してください</option>@foreach ($product_op_parts as $product_op_part)
<option value=”{{ $product_op_part->id }}”>{{ $product_op_part-&gt;sosabu_type }}</option>@endforeach
</select>
</div>
<div><label><b>シリーズ名</b> Series Name</label>
<select name=”product_series_name_id”>
<option value=””>選択してください</option>@foreach ($product_series_names as $product_series_name)
<option value=”{{ $product_series_name->id }}”>{{ $product_series_name-&gt;series_name }}</option>@endforeach
</select></div>
<div><label><b>極数</b> Number of Poles</label>
<select name=”product_pole_id”>
<option value=””>選択してください</option>@foreach ($product_poles as $product_pole)
<option value=”{{ $product_pole->id }}”>{{ $product_pole-&gt;poles_number }}</option>@endforeach
</select></div>
<!– 他のフォーム要素 –>
<table border=”0″ width=”350″ frame=”void” rules=”none”>
<tbody>
<tr>
<td><input type=”submit” value=”検索/ Search”></td>
<td>@csrf
<button type=”submit”>選択肢のクリア/ To clear options</button></td>
</tr>
</tbody>
</table>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
let options = {};
fetch(‘/path/to/options.json’)
.then(response => response.json())
.then(data => {
options = data;
});
const opPartSelect = document.getElementById(‘product_op_part_id’);
const seriesNameSelect = document.getElementById(‘product_series_name_id’);
const poleSelect = document.getElementById(‘product_pole_id’);
opPartSelect.addEventListener(‘change’, function() {
const selectedOpPart = this.value;
updateOptions(selectedOpPart, ‘series_names’, seriesNameSelect);
updateOptions(selectedOpPart, ‘poles’, poleSelect);
});
seriesNameSelect.addEventListener(‘change’, function() {
const selectedSeriesName = this.value;
updateOptions(selectedSeriesName, ‘poles’, poleSelect);
});
function updateOptions(selectedId, relationKey, targetSelect) {
const relatedOptions = options.product_op_parts[selectedId] ? options.product_op_parts[selectedId][relationKey] : [];
Array.from(targetSelect.options).forEach(option => {
option.style.display = relatedOptions.includes(parseInt(option.value)) ? ‘block’ : ‘none’;
});
targetSelect.value = ”;
}
});
</script>

まとめ
オプションの関係性をJSONファイルで定義します。
HTMLページロード時にこのJSONファイルを読み込みます。
JavaScriptで選択されたオプションに基づいて、他のオプションの選択肢を絞り込みます。
この方法で、クライアントサイドでの処理が行われるため、サーバーへのリクエストが減少し、レスポンスの速度が向上します。