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