如何使用 jQuery、AJAX、PHP 和 MySQL 动态填充依赖下拉列表？-mysql教程-PHP中文网

如何使用 jQuery、AJAX、PHP 和 MySQL 动态填充依赖下拉列表？

DDD

发布： 2024-11-16 18:10:04

原创

1025 人浏览过

How to Dynamically Populate a Dependent Dropdown List Using jQuery, AJAX, PHP, and MySQL?

使用 jQuery/AJAX 和 PHP/MySQL 进行动态下拉列表填充

在此示例中，我们的目标是创建一组两个下拉列表，其中第二个下拉列表的选项根据第一个下拉列表中的选择动态填充。

jQuery/AJAX脚本：

$(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 in the second dropdown
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Select Option</option>');

        // Populate 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 脚本：

<?php
require_once('../includes/connect.php');

$item_1_id = $_GET['item_1_id'];

$dbh = get_org_dbh($org_id);

$return_arr = array();

$sth = $dbh->query("SELECT id, name, level 
                     FROM groups
                     WHERE level = '2'
                     AND parent = $item_1_id
                     GROUP by name
                     ORDER BY name");

while ($row = $sth->fetch()) {
  $row_array = array("name" => $row['name'], "id" => $row['id']);
  array_push($return_arr, $row_array);
}

echo json_encode($return_arr);
?>

登录后复制

HTML 标记：