使用jQuery/AJAX 和PHP/MySQL 根據(jù)第一個(gè)下拉清單選擇填充第二個(gè)下拉清單
開(kāi)發(fā)動(dòng)態(tài)選單選擇填充第二個(gè)下拉清單
開(kāi)發(fā)動(dòng)態(tài)功能表允許使用者與表單互動(dòng)更容易。本文示範(fàn)如何使用 jQuery/AJAX 和 PHP/MySQL 根據(jù)第一個(gè)下拉清單中所做的選擇來(lái)填入第二個(gè)下拉清單。 HTML 程式碼建立兩個(gè)下拉列表，第一個(gè)下拉列表在頁(yè)面載入時(shí)填入。第二個(gè)下拉清單應(yīng)根據(jù)第一個(gè)下拉清單中的選擇顯示選項(xiàng)。$(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 options corresponding to earlier option of first dropdown
$('select#item_2').empty();
$('select#item_2').append('<option value="0">Select Option</option>');
// Populate options of the second dropdown
$.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>');
}
});
});
});
PHP 程式碼查詢資料庫(kù)以產(chǎn)生包含第二個(gè)下拉清單值的 JSON 物件。然後將 JSON 物件傳遞給 jQuery/AJAX 請(qǐng)求。
[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]
請(qǐng)注意，JSON 結(jié)果的格式應(yīng)如下所示：
接收並解析JSON 物件後在JavaScript 中，選項(xiàng)會(huì)動(dòng)態(tài)附加到第二個(gè)下拉列表中。這提供了一種用戶友好的方式來(lái)根據(jù)先前的選擇縮小選項(xiàng)範(fàn)圍。以上是如何使用 jQuery、AJAX、PHP 和 MySQL 填入依賴下拉清單？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
在MySQL列和查詢中處理零值
Jul 05, 2025 am 02:46 AM
處理MySQL中的NULL值需注意：1.設(shè)計(jì)表時(shí)關(guān)鍵字段設(shè)為NOTNULL，可選字段允許NULL；2.查詢判斷必須用ISNULL或ISNOTNULL，不能用=或!=；3.可用IFNULL或COALESCE函數(shù)替換顯示默認(rèn)值；4.插入或更新時(shí)直接使用NULL值需謹(jǐn)慎，注意數(shù)據(jù)源和ORM框架處理方式。 NULL表示未知值，不等於任何值，包括自身，因此查詢、統(tǒng)計(jì)、連接表時(shí)要特別小心，避免漏數(shù)據(jù)或邏輯錯(cuò)誤。合理使用函數(shù)和約束可以有效減少因NULL帶來(lái)的干擾。
使用mySQL中的mysqldump執(zhí)行邏輯備份
Jul 06, 2025 am 02:55 AM
mysqldump是用於執(zhí)行MySQL數(shù)據(jù)庫(kù)邏輯備份的常用工具，它生成包含CREATE和INSERT語(yǔ)句的SQL文件以重建數(shù)據(jù)庫(kù)。 1.它不備份原始文件，而是將數(shù)據(jù)庫(kù)結(jié)構(gòu)和內(nèi)容轉(zhuǎn)換為可移植的SQL命令；2.適用於小型數(shù)據(jù)庫(kù)或選擇性恢復(fù)，不適合TB級(jí)數(shù)據(jù)快速恢復(fù)；3.常用選項(xiàng)包括--single-transaction、--databases、--all-databases、--routines等；4.恢復(fù)時(shí)使用mysql命令導(dǎo)入，並可關(guān)閉外鍵檢查以提升速度；5.建議定期測(cè)試備份、使用壓縮、自動(dòng)化調(diào)
計(jì)算MySQL中的數(shù)據(jù)庫(kù)和表尺寸
Jul 06, 2025 am 02:41 AM
要查看MySQL數(shù)據(jù)庫(kù)和表的大小，可直接查詢information_schema或使用命令行工具。 1.查看整個(gè)數(shù)據(jù)庫(kù)大?。簣?zhí)行SQL語(yǔ)句SELECTtable_schemaAS'Database',SUM(data_length index_length)/1024/1024AS'Size(MB)'FROMinformation_schema.tablesGROUPBYtable_schema;可獲取所有數(shù)據(jù)庫(kù)的總大小，也可加WHERE條件限定具體數(shù)據(jù)庫(kù)；2.查看單個(gè)表大小：通過(guò)SELECTta
通過(guò)MySQL中的群組和有條款匯總數(shù)據(jù)
Jul 05, 2025 am 02:42 AM
GROUPBY用於按字段分組數(shù)據(jù)並執(zhí)行聚合操作，HAVING用於過(guò)濾分組後的結(jié)果。例如，使用GROUPBYcustomer_id可計(jì)算每個(gè)客戶的總消費(fèi)金額；配合HAVING可篩選出總消費(fèi)超過(guò)1000的客戶。 SELECT後的非聚合字段必須出現(xiàn)在GROUPBY中，HAVING可使用別名或原始表達(dá)式進(jìn)行條件篩選。常見(jiàn)技巧包括統(tǒng)計(jì)每組數(shù)量、多字段分組、結(jié)合多個(gè)條件過(guò)濾。
處理MySQL中的角色集和校正問(wèn)題
Jul 08, 2025 am 02:51 AM
字符集和排序規(guī)則問(wèn)題常見(jiàn)於跨平臺(tái)遷移或多人開(kāi)發(fā)時(shí)，導(dǎo)致亂碼或查詢不一致。核心解決方法有三：一要檢查並統(tǒng)一數(shù)據(jù)庫(kù)、表、字段的字符集為utf8mb4，通過(guò)SHOWCREATEDATABASE/TABLE查看，用ALTER語(yǔ)句修改；二要在客戶端連接時(shí)指定utf8mb4字符集，在連接參數(shù)或執(zhí)行SETNAMES中設(shè)置；三要合理選擇排序規(guī)則，推薦使用utf8mb4_unicode_ci以確保比較和排序準(zhǔn)確性，並在建庫(kù)建表時(shí)指定或通過(guò)ALTER修改。
實(shí)施交易和了解MySQL中的酸性
Jul 08, 2025 am 02:50 AM
MySQL支持事務(wù)處理，使用InnoDB存儲(chǔ)引擎可確保數(shù)據(jù)一致性和完整性。 1.事務(wù)是一組SQL操作，要么全部成功，要么全部失敗回滾；2.ACID屬性包括原子性、一致性、隔離性和持久性；3.手動(dòng)控制事務(wù)的語(yǔ)句為STARTTRANSACTION、COMMIT和ROLLBACK；4.四種隔離級(jí)別包括讀未提交、讀已提交、可重複讀和串行化；5.正確使用事務(wù)需注意避免長(zhǎng)時(shí)間運(yùn)行、關(guān)閉自動(dòng)提交、合理處理鎖及異常。通過(guò)這些機(jī)制，MySQL可實(shí)現(xiàn)高可靠與並發(fā)控制。
使用命令行客戶端連接到MySQL數(shù)據(jù)庫(kù)
Jul 07, 2025 am 01:50 AM
連接MySQL數(shù)據(jù)庫(kù)最直接的方式是使用命令行客戶端。首先輸入mysql-u用戶名-p並正確輸入密碼即可進(jìn)入交互式界面；若連接遠(yuǎn)程數(shù)據(jù)庫(kù)，需添加-h參數(shù)指定主機(jī)地址。其次，可直接在登錄時(shí)切換到特定數(shù)據(jù)庫(kù)或執(zhí)行SQL文件，如mysql-u用戶名-p數(shù)據(jù)庫(kù)名或mysql-u用戶名-p數(shù)據(jù)庫(kù)名
管理MySQL中的角色集和校正
Jul 07, 2025 am 01:41 AM
MySQL中字符集和排序規(guī)則的設(shè)置至關(guān)重要，影響數(shù)據(jù)存儲(chǔ)、查詢效率及一致性。首先，字符集決定可存儲(chǔ)字符範(fàn)圍，如utf8mb4支持中文和表情符號(hào)；排序規(guī)則控製字符比較方式，如utf8mb4_unicode_ci不區(qū)分大小寫，utf8mb4_bin為二進(jìn)制比較。其次，字符集可在服務(wù)器、數(shù)據(jù)庫(kù)、表、列多個(gè)層級(jí)設(shè)置，建議統(tǒng)一使用utf8mb4和utf8mb4_unicode_ci避免衝突。再者，亂碼問(wèn)題常由連接、存儲(chǔ)或程序端字符集不一致引起，需逐層排查並統(tǒng)一設(shè)置。此外，導(dǎo)出導(dǎo)入時(shí)應(yīng)指定字符集以防止轉(zhuǎn)換錯(cuò)
