首頁 > 資料庫 > mysql教程 > 如何使用 jQuery、AJAX、PHP 和 MySQL 建立動態相關下拉式選單?

如何使用 jQuery、AJAX、PHP 和 MySQL 建立動態相關下拉式選單?

Barbara Streisand
發布: 2024-11-17 16:54:02
原創
286 人瀏覽過

How to Create Dynamic Dependent Dropdowns Using jQuery, AJAX, PHP, and MySQL?

使用jQuery/AJAX 和PHP/MySQL 的動態下拉列表

問題:

建構一個使用jQuery/AJAX 和PHP/MySQL的一組動態下拉框,其中第二個下拉清單的選項取決於第一個下拉清單中的選擇。

JSON 查詢:

提供的用於產生第二個下拉清單值的 JSON 查詢可以正確執行。但是,將選項填入下拉表單元素時存在問題。

Javascript:

主要錯誤位於第一個下拉清單的事件處理程序中。修改後的程式碼應類似:

$().ready(function () {
    $("#item_1").change(function () {
        var group_id = $(this).val();

        $.ajax({
            type: "POST",
            url: "../../db/groups.php?item_1_id=" + group_id,
            dataType: "json",
            success: function (data) {
                // Clear previous options
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Select Option</option>');

                // Populate options from JSON
                $.each(data.subjects, function (i, val) {
                    $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
                });

                $('select#item_2').focus();
            },
            beforeSend: function () {
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Loading...</option>');
            },
            error: function () {
                $('select#item_2').attr('disabled', true);
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">No Options</option>');
            }
        });
    });
});
登入後複製

HTML:

提供的 HTML 程式碼顯示正確。

PHP:

用於擷取 JSON 資料的 PHP 程式碼也是正確。

範例 JSON 輸出:

提供的範例 JSON 輸出有效,並且將由 jQuery 程式碼正確解析。

以上是如何使用 jQuery、AJAX、PHP 和 MySQL 建立動態相關下拉式選單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板