コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > 最初のドロップダウンの選択に基づいて 2 番目のドロップダウン メニューに自動変更オプションを実装するにはどうすればよいですか?

最初のドロップダウンの選択に基づいて 2 番目のドロップダウン メニューに自動変更オプションを実装するにはどうすればよいですか?

DDD
リリース： 2024-10-21 06:45:02
オリジナル
965 人が閲覧しました

How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

最初のドロップダウンの選択に基づいて 2 番目のドロップダウン メニューのオプションを自動変更する

複数のドロップダウン メニューを作成する場合、2 番目のドロップダウン メニューのオプションはメニューは最初のメニューでの選択に依存しますが、データベースに依存せずにこれを実現することも可能です。

初期設定

最初のドロップダウン メニューは、カテゴリのリストを表示し、2 番目のドロップダウンには、選択したカテゴリに関連付けられたアイテムが表示されます。

最初のドロップダウン:

<select name="カテゴリ"></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>
<option value="3">Third</option>
<option value="4">Fourth</option>
ログイン後にコピー


2 番目のドロップダウン:

<select name="items"><br></select><br>

2 番目のドロップダウンの動的オプション

最初のドロップダウンでの選択に基づいて 2 番目のドロップダウンのオプションを更新するには、選択したカテゴリを PHP スクリプトに送信する AJAX 関数が必要です。

AJAX 関数:

<script type="text/javascript"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}
ログイン後にコピー


この関数は、最初のドロップダウンの onchange イベントに付加されます。

HTML に、動的に生成されたオプションを表示するために、ID が「sub」の別の select 要素を配置します。

<select onchange="ajaxfunction(this.value)"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->
ログイン後にコピー