如何依照另一個(gè)下拉框的選擇填入動(dòng)態(tài)下拉框？
我有一個(gè)名為類別的資料庫表，如下所示：
[名為「category」的資料庫表的圖像，其中包含「id」、「name」和「列」 "master"]
我正在嘗試做一個(gè)動(dòng)態(tài)下拉框，索引腳本顯示為：
[索引腳本的程式碼範(fàn)例]
更新.php 顯示為：
[update.php的程式碼範(fàn)例]
第二個(gè)下拉框未顯示值取決於第一個(gè)下拉框，如下所示：
[帶有兩個(gè)下拉框的表單的圖像。第一個(gè)下拉方塊包含「選擇一個(gè)」、「類別 1」和「類別 2」選項(xiàng)。第二個(gè)下拉框只有「----」選項(xiàng)。 ]
有人可以幫我嗎。
答案：
到建立一個(gè)動(dòng)態(tài)下拉框，其中第二個(gè)框中的選項(xiàng)取決於第一個(gè)框中的選擇，您可以使用以下命令做法：
-
處理第一個(gè)下拉框的change事件：使用jQuery，為第一個(gè)下拉框新增change事件監(jiān)聽器。當(dāng)?shù)谝粋€(gè)下拉框的值發(fā)生變化時(shí)，將觸發(fā)此事件。
-
傳送AJAX 要求： 在事件處理程序中，向PHP 檔案發(fā)出AJAX 要求（例如， update.php），它將根據(jù)第一個(gè)下拉清單的選定值傳回第二個(gè)下拉框的選項(xiàng)
-
處理AJAX 回應(yīng)： 在AJAX在請(qǐng)求的成功回調(diào)中，解析回應(yīng)數(shù)據(jù)，其中包含要添加到第二個(gè)下拉列表中的選項(xiàng)的HTML 代碼
-
更新第二個(gè)下拉框： 使用JavaScript 使用JavaScript 生成的選項(xiàng)更新第二個(gè)下拉方塊的HTML回應(yīng)資料。
-
啟用第二個(gè)下拉框：選項(xiàng)更新後，啟用第二個(gè)下拉框供使用者選擇。
這裡是一個(gè)證明這一點(diǎn)的例子方法：
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>updat e.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);
}
?>
依照此方法，您可以建立多層動(dòng)態(tài)下拉框，其中每個(gè)下拉框中的選項(xiàng)取決於前一個(gè)下拉框中所做的選擇盒子。
以上是如何使用 AJAX 和 PHP 填入依賴下拉方塊？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！