最初のドロップダウンの選択に基づいて 2 番目のドロップダウン メニューに自動変更オプションを実装するにはどうすればよいですか?
- DDDオリジナル
- 2024-10-21 06:45:02856ブラウズ
最初のドロップダウンの選択に基づいて 2 番目のドロップダウン メニューのオプションを自動変更する
複数のドロップダウン メニューを作成する場合、2 番目のドロップダウン メニューのオプションはメニューは最初のメニューでの選択に依存しますが、データベースに依存せずにこれを実現することも可能です。
初期設定
最初のドロップダウン メニューは、カテゴリのリストを表示し、2 番目のドロップダウンには、選択したカテゴリに関連付けられたアイテムが表示されます。
最初のドロップダウン:
<select name="カテゴリ"></p> <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>
<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> <pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->
PHP スクリプトの処理
process.php スクリプトは、次のオプションを生成します。選択したカテゴリに基づく 2 番目のドロップダウン。
process.php:
<?php</p><pre class="brush:php;toolbar:false">$parent = array(
"First" => array("Smartphone", "Charger"),
"Second" => array("Basketball", "Volleyball"),
"Third" => array("Apple", "Orange"),
"Fourth" => array("Dog", "Cat")
);
foreach ($parent[$_GET["parent"]] as $id => $name)
echo '<option value="', $id,'">', $name,'</option>'</p>
<p>?><br>
この場合、配列を使用してカテゴリと項目の関係を定義しました。ただし、これをデータベースからデータを取得するように簡単に適合させることもできます。
以上が最初のドロップダウンの選択に基づいて 2 番目のドロップダウン メニューに自動変更オプションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。