ドロップダウン ボックスを動(dòng)的に設(shè)定する
Web 開発で使用される一般的な手法は、ドロップダウン ボックスを表示できるインタラクティブな Web フォームを作成することです。前のドロップダウン ボックスで選択した値に依存するオプション。この機(jī)能は通常、JavaScript (jQuery) とサーバーサイド スクリプト (PHP) の組み合わせを使用して実現(xiàn)されます。
コード例の説明
この特定のシナリオでは、最初のドロップダウン ボックスで選択された値に基づいて 2 番目のドロップダウン ボックスに値を入力しようとしています。提供されているコードは、次の手順を使用してこれを?qū)g現(xiàn)します。
-
ユーザーの選択のキャプチャ: ユーザーが最初のドロップダウン ボックスで選択を変更すると、jQuery イベント ハンドラーが引き起こされた。このハンドラーは、$(this).val() を使用して選択されたオプションの値をキャプチャします。
-
リクエストの送信: jQuery の AJAX 機(jī)能を使用して、非同期リクエストがサーバー側(cè)に送信されます。 PHP スクリプト、another_php_file.php。リクエストとともに、選択されたオプション sel_stud の値がデータとして渡されます。
-
サーバー側(cè)処理: another_php_file.php スクリプトはポストされたデータを受信し、必要なデータベース クエリを?qū)g行して、選択したオプションに固有の関連データを取得し、更新された 2 番目のドロップダウンの HTML マークアップを含む応答を組み立てます。 box.
-
ドロップダウン ボックスの更新: サーバーから受信した応答は、AJAX 成功ハンドラー関數(shù)によって処理されます。 2 番目のドロップダウン ボックスの HTML マークアップは、$('#LaDIV').html(whatigot); を使用して DOM に挿入されます。
カスタマイズされた例
このコード例は、最初のドロップダウン ボックスを使用して生徒の名前を選択するカスタマイズされた実裝を示しています。選択すると、2 番目のドロップダウン ボックスに、その生徒が教えた対応するクラスが表示されます。
tester.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#stSelect').change(function() {
var sel_stud = $(this).val();
$.ajax({
type: "POST",
url: "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
$('#LaDIV').html(whatigot);
}
});
});
});
</script>
</head>
<body>
<select name="students">another_php_file.php
<?php
// Database Connection
$server = 'localhost';
$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) or die($connect_error);
mysql_select_db($dbname) or die($connect_error);
// Get POST Data
$selStudent = $_POST['theOption'];
// Query Database
$query = "SELECT * FROM `class` WHERE `teacher_id` = $selStudent";
$result = mysql_query($query) or die('Fn Error: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
// Build Response HTML
$r = '
<select>
';
if ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
}
} else {
$r = '<p>No classes taught by this student</p>';
}
// Echo Response
echo $r;
?>
このカスタマイズされたソリューションは、クラスを表示するために 2 番目のドロップダウン ボックスを調(diào)整します。選択した生徒に基づいて、動(dòng)的に入力されるドロップダウン ボックスに柔軟で使いやすいフォーム エクスペリエンスを提供します。
以上がjQuery と PHP を使用して、最初のドロップダウン ボックスでの選択に基づいて 2 番目のドロップダウン ボックスを動(dòng)的に設(shè)定するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。