動態(tài)填充下拉框
Web 開發(fā)中使用的一種流行技術是創(chuàng)建可以顯示下拉框的交互式 Web 表單取決于前面下拉框中所選值的選項。此功能通常使用 JavaScript (jQuery) 和服務器端腳本 (PHP) 的組合來實現(xiàn)。
示例代碼說明
在此特定場景中，您是嘗試根據(jù)第一個下拉框中選擇的值填充第二個下拉框。提供的代碼通過以下步驟完成此操作：
-
捕獲用戶的選擇：當用戶更改第一個下拉框中的選擇時，jQuery 事件處理程序觸發(fā)。該處理程序使用 $(this).val() 捕獲所選選項的值。
-
發(fā)送請求：使用 jQuery 的 AJAX 功能，將異步請求發(fā)送到服務器端PHP 腳本，another_php_file.php。隨著請求，所選選項 sel_stud 的值作為數(shù)據(jù)傳遞。
-
服務器端處理： another_php_file.php 腳本接收發(fā)布的數(shù)據(jù)，執(zhí)行必要的數(shù)據(jù)庫查詢檢索特定于所選選項的相關數(shù)據(jù)，并為更新的第二個下拉列表組裝包含 HTML 標記的響應box.
-
更新下拉框：從服務器收到的響應由 AJAX 成功處理函數(shù)處理。使用 $('#LaDIV').html(whatigot);.
自定義示例
將第二個下拉框的 HTML 標記注入到 DOM 中
此代碼示例演示了一個自定義實現(xiàn)，其中第一個下拉框用于選擇學生姓名。選擇后，第二個下拉框會顯示該學生教授的相應課程。
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;
?>
這個定制的解決方案定制了第二個下拉框來顯示基于類別的針對選定的學生，為動態(tài)填充的下拉框提供靈活且用戶友好的表單體驗。
以上是如何使用 jQuery 和 PHP 根據(jù)第一個下拉框中的選擇動態(tài)填充第二個下拉框？的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！