jQuery, AJAX, PHP 및 MySQL을 사용하여 종속 드롭다운 목록을 동적으로 채우는 방법은 무엇입니까?

DDD
풀어 주다: 2024-11-16 18:10:04
원래의
972명이 탐색했습니다.

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 마크업:

<label>
로그인 후 복사

위 내용은 jQuery, AJAX, PHP 및 MySQL을 사용하여 종속 드롭다운 목록을 동적으로 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿