使用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中文網其他相關文章!