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