これは、必要に応じてカスタマイズできる例です。基本的に、jQuery / AJAX を使用してこれを実現できます。
次の例では、見つかった値が入力された 2 番目のドロップダウン ボックスを作成します。ロジックを 1 行ずつ追ってみると、実際には非常に単純であることがわかります。コメントアウトした行をいくつか残しました。コメントを外すと (一度に 1 行)、スクリプトが各段階で何を行っているかがわかります。
ファイル 1 -- TESTER.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//alert('Document is ready');
$('#stSelect').change(function() {
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function() {
alert('You clicked the button');
});
} //END success fn
}); //END $.ajax
}); //END dropdown change event
}); //END document.ready
</script>
</head>
<body>
<select name="students" id="stSelect">
<option value="">Please Select</option>
<option value="John">John Doe</option>
<option value="Mike">Mike Williams</option>
<option value="Chris">Chris Edwards</option>
</select>
<div id="LaDIV"></div>
</body>
</html>
ファイル 2 - another_php_file.php
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);
//Get value posted in by ajax
$selStudent = $_POST['theOption'];
//die('You sent: ' . $selStudent);
//Run DB query
$query = "SELECT * FROM `category` WHERE `master` = 0";
$result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
//die('Query returned ' . $num_rows_returned . ' rows.');
//Prepare response html markup
$r = '
<h1>Found in Database:</h1>
<select>
';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
}
} else {
$r = '<p>No student by that name on staff</p>';
}
//Add this extra button for fun
$r = $r . '</select><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the
echo $r;
よくある質問に答えるには: 「1 番目のドロップダウン ボックスで選択したオプションにのみ関連するフィールドを 2 番目のドロップ ダウン ボックスに入力するにはどうすればよいですか?」
A. 最初のドロップダウンの.changeイベント内で、最初のドロップダウン ボックスの値を読み取ります。
$('#dropdown_id').change(function() {
var dd1 = $('#dropdown_id').val();
}
B. 上記のイベントの AJAX コードで.change()、2 番目の .PHP ファイル (この場合は「another_php_file.php」) に送信するデータにその変数を含めます。
C. その渡された変数を mysql クエリで使用しているため、結果が制限されている。success:これらの結果は AJAX 関数に返され、AJAX 関数の一部でアクセスできます。
D. その成功関数では、変更された SELECT 値を使用してコードを DOM に挿入します。
これは、上記の例がどのように機能するかです:
ユーザーが学生の名前を選択すると、jQuery.change()セレクターが起動します
ユーザーが選択したオプションを取得する行は次のとおりです。
var sel_stud = $(this).val();
この値はanother_php_file.php、AJAX コードの次の行を介して に送信されます。
data: 'theOption=' + sel_stud,
受信ファイルanother_php_file.phpは、ここでユーザーの選択を受け取ります。
$selStudent = $_POST['theOption'];
Var $selStudent (AJAX 経由で投稿されたユーザーの選択) は、mysql 検索で使用されます。
$query = " SELECT * FROM `category` WHERE `master` = 0 AND `name` = '$selStudent' ";
(データベースに合わせて例を変更するとき、$selStudent への参照は削除されました。しかし、これ (ここ、上記) は、それを使用する方法です)。
ここで新しい<SELECT>コード ブロックを作成し、HTML を という変数に格納します$r。HTML が完全にビルドされたら、カスタマイズしたコードをエコー バックするだけで AJAX ルーチンに戻します。
echo $r;
受信したデータ (カスタマイズされた<SELECT>コード ブロック) は AJAX 内で使用でき、次のようsuccess: function() {//code block}に DOM に挿入できます。
$('#LaDIV').html(whatigot);
そしてほら、最初のドロップダウン コントロールからの選択に固有の値でカスタマイズされた 2 番目のドロップダウン コントロールが表示されます。
Microsoft 以外のブラウザーのように動作します。