jQuery와 PHP를 사용하여 첫 번째 드롭다운 상자의 선택 항목을 기반으로 두 번째 드롭다운 상자를 동적으로 채우려면 어떻게 해야 합니까?-PHP 튜토리얼-php.cn

jQuery와 PHP를 사용하여 첫 번째 드롭다운 상자의 선택 항목을 기반으로 두 번째 드롭다운 상자를 동적으로 채우려면 어떻게 해야 합니까?

Patricia Arquette

풀어 주다： 2024-12-23 08:18:16

원래의

919명이 탐색했습니다.

How can I dynamically populate a second drop-down box based on the selection in a first drop-down box using jQuery and PHP?

동적으로 드롭다운 상자 채우기

웹 개발에서 널리 사용되는 기술은 드롭다운 상자가 표시될 수 있는 대화형 웹 양식을 만드는 것입니다. 이전 드롭다운 상자에서 선택한 값에 따라 달라지는 옵션입니다. 이 기능은 일반적으로 JavaScript(jQuery)와 서버측 스크립팅(PHP)의 조합을 사용하여 구현됩니다.

예제 코드 설명

이 특정 시나리오에서는 첫 번째 드롭다운 상자에서 선택한 값을 기반으로 두 번째 드롭다운 상자를 채우려고 합니다. 제공된 코드는 다음 단계를 사용하여 이를 수행합니다.

사용자 선택 캡처: 사용자가 첫 번째 드롭다운 상자에서 선택 항목을 변경하면 jQuery 이벤트 핸들러는 다음과 같습니다. 트리거되었습니다. 이 핸들러는 $(this).val()을 사용하여 선택한 옵션의 값을 캡처합니다.
요청 보내기: jQuery의 AJAX 기능을 사용하여 비동기 요청이 서버측으로 전송됩니다. PHP 스크립트, another_php_file.php. 요청과 함께 선택한 옵션 sel_stud의 값이 데이터로 전달됩니다.
서버측 처리: another_php_file.php 스크립트는 게시된 데이터를 수신하고 필요한 데이터베이스 쿼리를 수행하여 선택한 옵션과 관련된 관련 데이터를 검색하고 업데이트된 두 번째 드롭다운에 대한 HTML 마크업이 포함된 응답을 조합합니다. box.
드롭다운 상자 업데이트: 서버로부터 받은 응답은 AJAX 성공 핸들러 함수에 의해 처리됩니다. 두 번째 드롭다운 상자에 대한 HTML 마크업은 $('#LaDIV').html(whatigot);.

사용자 정의된 예

를 사용하여 DOM에 삽입됩니다.

이 코드 예제는 첫 번째 드롭다운 상자를 사용하여 학생 이름을 선택하는 사용자 정의 구현을 보여줍니다. 선택하면 두 번째 드롭다운 상자에 해당 학생이 가르치는 해당 수업이 표시됩니다.

tester.php

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#stSelect').change(function() {
                var sel_stud = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "another_php_file.php",
                    data: 'theOption=' + sel_stud,
                    success: function(whatigot) {
                        $('#LaDIV').html(whatigot);
                    }
                });
            });
        });
    </script>
</head>
<body>

    <select name="students">

로그인 후 복사

another_php_file.php

<?php

    // Database Connection
    $server = 'localhost';
    $login = 'root';
    $pword = '';
    $dbname = 'test';
    mysql_connect($server,$login,$pword) or die($connect_error);
    mysql_select_db($dbname) or die($connect_error);

    // Get POST Data
    $selStudent = $_POST['theOption'];

    // Query Database
    $query = "SELECT * FROM `class` WHERE `teacher_id` = $selStudent";
    $result = mysql_query($query) or die('Fn Error: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);

    // Build Response HTML
    $r = '
        <select>
    ';

    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }
    } else {
        $r = '<p>No classes taught by this student</p>';
    }

    // Echo Response
    echo $r;
?>

로그인 후 복사

이 맞춤형 솔루션은 두 번째 드롭다운 상자를 클래스 기반으로 표시하도록 조정합니다. 선택한 학생에 대해 동적으로 채워지는 드롭다운 상자에 대한 유연하고 사용자 친화적인 양식 경험을 제공합니다.

위 내용은 jQuery와 PHP를 사용하여 첫 번째 드롭다운 상자의 선택 항목을 기반으로 두 번째 드롭다운 상자를 동적으로 채우려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!