ホームページ >バックエンド開発 >PHPチュートリアル >AJAX と PHP を使用して依存ドロップダウン ボックスにデータを入力するにはどうすればよいですか?
AJAX と PHP を使用して依存ドロップダウン ボックスにデータを入力するにはどうすればよいですか?
- Mary-Kate Olsenオリジナル
- 2024-12-12 14:46:15386ブラウズ
別のドロップダウン ボックスの選択に基づいて動的ドロップダウン ボックスに値を入力するにはどうすればよいですか?
以下に示すように category というデータベース テーブルがあります。
[列「id」、「name」、「master」を持つ「category」という名前のデータベーステーブルの画像]
I動的ドロップダウンボックスを実行しようとしていますが、インデックススクリプトは次のように表示されます:
[インデックススクリプトのコードサンプル]
update.php は次のように表示されます:
[update.php のコードサンプル]
2 番目のドロップダウン ボックスには、1 番目のドロップダウン ボックスに依存する値が表示されません。表示:
[2 つのドロップダウン ボックスを含むフォームのイメージ。最初のドロップダウン ボックスには、[1 つ選択]、[カテゴリ 1]、および [カテゴリ 2] のオプションがあります。 2 番目のドロップダウン ボックスにはオプション「----」のみがあります。]
誰か助けてください。
答え:
2 番目のボックスのオプションが最初のボックスの選択に依存する動的なドロップダウン ボックスを作成するには、次を使用できます。アプローチ:
- 最初のドロップダウン ボックスの変更イベントを処理する: jQuery を使用して、最初のドロップダウン ボックスに変更イベント リスナーを追加します。最初のドロップダウン ボックスの値が変更されると、このイベントがトリガーされます。
- AJAX リクエストを送信します: イベント ハンドラーで、PHP ファイルに対して AJAX リクエストを作成します (例: update.php)、最初のドロップダウンで選択した値に基づいて 2 番目のドロップダウン ボックスのオプションを返します。 box.
- AJAX 応答の処理: AJAX 要求の成功コールバックで、応答データを解析します。これには、2 番目のドロップダウンに追加されるオプションの HTML コードが含まれます。 box.
- 2 番目のドロップダウン ボックスを更新します: JavaScript を使用して、2 番目のドロップダウン ボックスの HTML を更新します。応答データから生成されたオプション。
- 2 番目のドロップダウン ボックスを有効にします: オプションが更新されたら、ユーザー選択用の 2 番目のドロップダウン ボックスを有効にします。
これを示す例は次のとおりですアプローチ:
tester.php:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('#first_dropdown').change(function() {
var value = $(this).val();
$.ajax({
url: 'update.php',
method: 'POST',
data: { value: value },
success: function(response) {
$('#second_dropdown').html(response);
$('#second_dropdown').prop('disabled', false);
}
});
});
});
</script>
</head>
<body>
<select>update.php:
<?php
if (isset($_POST['value'])) {
$selectedValue = $_POST['value'];
$data = array();
// Here you would typically query your database to retrieve options based on the selected value.
if ($selectedValue == 'category1') {
$data[] = '<option value="option1">Option 1</option>';
$data[] = '<option value="option2">Option 2</option>';
} elseif ($selectedValue == 'category2') {
$data[] = '<option value="option3">Option 3</option>';
$data[] = '<option value="option4">Option 4</option>';
}
echo implode('', $data);
}
?>
このアプローチに従って、各ドロップダウン ボックスのオプションが前のドロップダウンでの選択に依存する、マルチレベルの動的なドロップダウン ボックスを作成できます。ボックス。
以上がAJAX と PHP を使用して依存ドロップダウン ボックスにデータを入力するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。