データベースを使用せずに最初のドロップダウンでの選択に基づいて 2 番目のドロップダウンのオプションを自動的に更新する方法
ドロップダウンが 2 つあります。オプションはデータベースから取得されません。最初のドロップダウンでは、ユーザーはカテゴリを選択できます。 2 番目のドロップダウンのオプションは、最初のドロップダウンでの選択内容によって異なります。
たとえば、ユーザーが最初のドロップダウンで First オプションを選択した場合、2 番目のドロップダウンにはオプション スマートフォンと充電器。ユーザーが選択を 2 番目 オプションに変更すると、2 番目のドロップダウンにはオプション バスケットボール と バレーボール が表示されます。
データベースを使用しない実装
<select name="category" onchange="changeSecondDropdown(this)"><p></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>
ログイン後にコピー
<script><p>function changeSecondDropdown(category) {<br> const オプション= {<br></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">"1": ["Smartphone", "Charger"],
"2": ["Basketball", "Volleyball"]</pre><div class="contentsignin">ログイン後にコピー</div></div>};<p></p>// 2 番目のドロップダウンのオプションをクリアします<p> const itemsDropdown = document.getElementById("items");<br> itemsDropdown.innerHTML = "";<br></p>// 選択したカテゴリに基づいて新しいオプションを追加します<p> const selectedOptions = options[category.value];<br> for (selectedOptions の const オプション) {<br></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const newOption = document.createElement("option");
newOption.value = option;
newOption.textContent = option;
itemsDropdown.appendChild(newOption);</pre><div class="contentsignin">ログイン後にコピー</div></div>}<p>}<br></script>
この実装では、JavaScript オブジェクトを使用して各カテゴリのオプションを保存します。ユーザーが最初のドロップダウンの選択を変更すると、changeSecondDropdown 関数が呼び出され、選択されたカテゴリに基づいて 2 番目のドロップダウンのオプションが更新されます。
以上がデータベースを使用せずに最初のドロップダウン選択に基づいてドロップダウン オプションを自動的に更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
