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

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

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

초기 설정

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

첫 번째 드롭다운:

<select name="category"><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>

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

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

AJAX 함수:

<script type="text/javascript"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}</script>

pre>

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

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

<select onchange="ajaxfunction(this.value)"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->

PHP 스크립트 처리

process.php 스크립트는 다음에 대한 옵션 생성을 담당합니다. 선택한 카테고리에 따른 두 번째 드롭다운.

process.php:

<?php </p><pre class="brush:php;toolbar:false">$parent = array(
    "First" => array("Smartphone", "Charger"),
    "Second" => array("Basketball", "Volleyball"),
    "Third" => array("Apple", "Orange"),
    "Fourth" => array("Dog", "Cat")
);

foreach ($parent[$_GET["parent"]] as $id => $name)
    echo '<option value="', $id,'">', $name,'</option>'

?>

이 경우에는 배열을 사용하여 카테고리-항목 관계를 정의했습니다. 그러나 이는 데이터베이스에서 데이터를 검색하는 데에도 쉽게 적용할 수 있습니다.

위 내용은 첫 번째 드롭다운 선택에 따라 두 번째 드롭다운 메뉴에서 자동 변경 옵션을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!