첫 번째 드롭다운 선택에 따라 두 번째 드롭다운 메뉴에서 자동 변경 옵션을 구현하는 방법은 무엇입니까?
- DDD원래의
- 2024-10-21 06:45:02990검색
첫 번째 드롭다운 선택에 따라 두 번째 드롭다운 메뉴의 옵션 자동 변경
두 번째 드롭다운 메뉴의 옵션이 여러 개 생성되는 경우 메뉴는 첫 번째 메뉴에서 선택한 항목에 따라 다르므로 데이터베이스에 의존하지 않고도 이를 달성할 수 있습니다.
초기 설정
첫 번째 드롭다운 메뉴는 카테고리 목록을 표시하고, 두 번째 드롭다운에는 선택한 카테고리와 관련된 항목이 표시됩니다.
첫 번째 드롭다운:
<select name="category"></p> <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>
<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> <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>'</p>
<p>?><br>
이 경우에는 배열을 사용하여 카테고리-항목 관계를 정의했습니다. 그러나 이는 데이터베이스에서 데이터를 검색하는 데에도 쉽게 적용할 수 있습니다.
위 내용은 첫 번째 드롭다운 선택에 따라 두 번째 드롭다운 메뉴에서 자동 변경 옵션을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.