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