지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > PHP 튜토리얼 > 첫 번째 드롭다운 선택에 따라 두 번째 드롭다운 메뉴에서 자동 변경 옵션을 구현하는 방법은 무엇입니까?

첫 번째 드롭다운 선택에 따라 두 번째 드롭다운 메뉴에서 자동 변경 옵션을 구현하는 방법은 무엇입니까?

DDD
풀어 주다： 2024-10-21 06:45:02
원래의
966명이 탐색했습니다.

How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

첫 번째 드롭다운 선택에 따라 두 번째 드롭다운 메뉴의 옵션 자동 변경

두 번째 드롭다운 메뉴의 옵션이 여러 개 생성되는 경우 메뉴는 첫 번째 메뉴에서 선택한 항목에 따라 다르므로 데이터베이스에 의존하지 않고도 이를 달성할 수 있습니다.

초기 설정

첫 번째 드롭다운 메뉴는 카테고리 목록을 표시하고, 두 번째 드롭다운에는 선택한 카테고리와 관련된 항목이 표시됩니다.

첫 번째 드롭다운:

<select name="category"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
로그인 후 복사


두 번째 드롭다운:

<select name="items"><br></select><br>

두 번째 드롭다운의 동적 옵션

첫 번째 드롭다운의 선택 항목을 기반으로 두 번째 드롭다운의 옵션을 업데이트하려면 선택한 카테고리를 PHP 스크립트로 보내는 AJAX 함수가 필요합니다.

AJAX 함수:

<script type="text/javascript"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}
로그인 후 복사


이 함수는 첫 번째 드롭다운의 onchange 이벤트에 첨부됩니다.

HTML에서 동적으로 생성된 옵션을 표시하려면 ID가 "sub"인 또 다른 선택 요소를 배치하세요.

<select onchange="ajaxfunction(this.value)"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->
로그인 후 복사