如何根據(jù)另一個下拉框的選擇填充動態(tài)下拉框？
我有一個名為類別的數(shù)據(jù)庫表，如下所示：
[名為“category”的數(shù)據(jù)庫表的圖像，其中包含“id”、“name”和“列” "master"]
我正在嘗試做一個動態(tài)下拉框，索引腳本顯示為：
[索引腳本的代碼示例]
更新.php 顯示為：
[update.php 的代碼示例]
第二個下拉框未顯示值取決于第一個下拉框，如下所示：
[帶有兩個下拉框的表單的圖像。第一個下拉框包含“選擇一個”、“類別 1”和“類別 2”選項。第二個下拉框只有“----”選項。]
有人可以幫我嗎。
答案：
到創(chuàng)建一個動態(tài)下拉框，其中第二個框中的選項取決于第一個框中的選擇，您可以使用以下命令做法：
-
處理第一個下拉框的change事件：使用jQuery，為第一個下拉框添加change事件監(jiān)聽器。當?shù)谝粋€下拉框的值發(fā)生變化時，將觸發(fā)此事件。
-
發(fā)送 AJAX 請求： 在事件處理程序中，向 PHP 文件發(fā)出 AJAX 請求（例如， update.php），它將根據(jù)第一個下拉列表的選定值返回第二個下拉框的選項
-
處理 AJAX 響應： 在 AJAX 請求的成功回調(diào)中，解析響應數(shù)據(jù)，其中包含要添加到第二個下拉列表中的選項的 HTML 代碼
-
更新第二個下拉框： 使用 JavaScript 使用 JavaScript 生成的選項更新第二個下拉框的 HTML響應數(shù)據(jù)。
-
啟用第二個下拉框：選項更新后，啟用第二個下拉框供用戶選擇。
這里是一個證明這一點的例子方法：
tester.php:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('#first_dropdown').change(function() {
var value = $(this).val();
$.ajax({
url: 'update.php',
method: 'POST',
data: { value: value },
success: function(response) {
$('#second_dropdown').html(response);
$('#second_dropdown').prop('disabled', false);
}
});
});
});
</script>
</head>
<body>
<select>update.php:
<?php
if (isset($_POST['value'])) {
$selectedValue = $_POST['value'];
$data = array();
// Here you would typically query your database to retrieve options based on the selected value.
if ($selectedValue == 'category1') {
$data[] = '<option value="option1">Option 1</option>';
$data[] = '<option value="option2">Option 2</option>';
} elseif ($selectedValue == 'category2') {
$data[] = '<option value="option3">Option 3</option>';
$data[] = '<option value="option4">Option 4</option>';
}
echo implode('', $data);
}
?>
按照此方法，您可以創(chuàng)建多級動態(tài)下拉框，其中每個下拉框中的選項取決于前一個下拉框中所做的選擇盒子。
以上是如何使用 AJAX 和 PHP 填充依賴下拉框？的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！