首頁 > 後端開發 > php教程 > 如何使用 jQuery 和 AJAX 建立動態級聯下拉方塊?

如何使用 jQuery 和 AJAX 建立動態級聯下拉方塊?

Susan Sarandon
發布: 2025-01-05 12:33:44
原創
845 人瀏覽過

How to Create Dynamic Cascading Dropdown Boxes using jQuery and AJAX?

動態級聯下拉框

此範例示範了動態下拉方塊的創建,該動態下拉方塊基於以下內容填充第二個下拉框選擇第一個下拉框,如必填。

說明:

  1. 第一個下拉框:

    • 包含用戶🎜>選擇的選項。
    • 當使用者選擇
  2. jQuery/AJAX:

    • change 請求到事件觸發一個單獨的PHP 檔案(例如update.php)。
    • 從中選取的值第一個下拉方塊隨請求一起傳送。
  3. update.php:

    • 接收所選內容第一個下拉框中的值。
    • 執行查詢以檢索第二個下拉清單的相關選項
    • 將資料格式化為 JSON 格式並傳回 AJAX 呼叫。
  4. AJAX 成功函數:

    • 接收 JSON 回應並使用相關內容填入第二個下拉式方塊選項。

範例程式碼:

tester.php:

<select name="gender">
登入後複製

upda te.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}
登入後複製

機制:

  1. 何時使用者從第一個下拉方塊中選擇一個選項,其值將被捕獲。
  2. 向 update.php 發出 AJAX 請求,並攜帶所選值。
  3. update.php 會擷取為第二個下拉方塊選擇適當的選項,並以 JSON 格式傳回。
  4. AJAX 成功函數更新第二個下拉框中選定的選項,使其成為動態。

透過執行以下步驟,您可以建立級聯下拉框,為資料選擇提供使用者友好且回應靈敏的介面。

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

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