如何使用 AJAX 和 PHP 填入依賴下拉方塊？-php教程-PHP中文網

如何使用 AJAX 和 PHP 填入依賴下拉方塊？

Mary-Kate Olsen

發布： 2024-12-12 14:46:15

原創

384 人瀏覽過

How to Populate a Dependent Dropdown Box Using AJAX and PHP?

如何依照另一個下拉框的選擇填入動態下拉框？

我有一個名為類別的資料庫表，如下所示：

[名為「category」的資料庫表的圖像，其中包含「id」、「name」和「列」 "master"]

我正在嘗試做一個動態下拉框，索引腳本顯示為：

[索引腳本的程式碼範例]

更新.php 顯示為：

[update.php的程式碼範例]

第二個下拉框未顯示值取決於第一個下拉框，如下所示：

[帶有兩個下拉框的表單的圖像。第一個下拉方塊包含「選擇一個」、「類別 1」和「類別 2」選項。第二個下拉框只有「----」選項。 ]

有人可以幫我嗎。

答案：

到建立一個動態下拉框，其中第二個框中的選項取決於第一個框中的選擇，您可以使用以下命令做法：

處理第一個下拉框的change事件：使用jQuery，為第一個下拉框新增change事件監聽器。當第一個下拉框的值發生變化時，將觸發此事件。
傳送AJAX 要求： 在事件處理程序中，向PHP 檔案發出AJAX 要求（例如， update.php），它將根據第一個下拉清單的選定值傳回第二個下拉框的選項
處理AJAX 回應： 在AJAX在請求的成功回調中，解析回應數據，其中包含要添加到第二個下拉列表中的選項的HTML 代碼
更新第二個下拉框： 使用JavaScript 使用JavaScript 生成的選項更新第二個下拉方塊的HTML回應資料。
啟用第二個下拉框：選項更新後，啟用第二個下拉框供使用者選擇。

這裡是一個證明這一點的例子方法：

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);
}
?>

登入後複製

依照此方法，您可以建立多層動態下拉框，其中每個下拉框中的選項取決於前一個下拉框中所做的選擇盒子。

以上是如何使用 AJAX 和 PHP 填入依賴下拉方塊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！