AJAX와 PHP를 사용하여 종속 드롭다운 상자를 채우는 방법은 무엇입니까?
- Mary-Kate Olsen원래의
- 2024-12-12 14:46:15375검색
다른 드롭다운 상자 선택에 따라 동적 드롭다운 상자를 어떻게 채울 수 있나요?
아래 표시된 것처럼 카테고리라는 데이터베이스 테이블이 있습니다.
["id", "name" 열이 있는 "category"라는 이름의 데이터베이스 테이블 이미지 "master"]
동적 드롭다운 상자를 만들려고 하는데 인덱스 스크립트가 다음과 같이 표시됩니다.
[인덱스 스크립트의 코드 샘플]
업데이트 .php는 다음과 같이 표시됩니다.
[update.php의 코드 샘플]
두 번째 드롭다운 상자에 값은 다음과 같이 첫 번째 드롭다운 상자에 따라 달라집니다.
[두 개의 드롭다운 상자가 있는 양식 이미지. 첫 번째 드롭다운 상자에는 "하나 선택", "범주 1" 및 "범주 2"에 대한 옵션이 있습니다. 두 번째 드롭다운 상자에는 "--" 옵션만 있습니다.]
누가 좀 도와주세요.
답변:
To 두 번째 상자의 옵션이 첫 번째 상자의 선택 사항에 따라 달라지는 동적 드롭다운 상자를 생성하면 다음을 사용할 수 있습니다. 접근 방식:
- 첫 번째 드롭다운 상자의 변경 이벤트 처리: jQuery를 사용하여 첫 번째 드롭다운 상자에 변경 이벤트 리스너를 추가합니다. 첫 번째 드롭다운 상자의 값이 변경되면 이 이벤트가 트리거됩니다.
- AJAX 요청 보내기: 이벤트 핸들러에서 PHP 파일에 AJAX 요청을 보냅니다(예: update.php) 첫 번째 드롭다운 상자에서 선택한 값을 기반으로 두 번째 드롭다운 상자에 대한 옵션을 반환합니다.
- 핸들 AJAX 응답: AJAX 요청의 성공 콜백에서 응답 데이터를 구문 분석합니다. 여기에는 두 번째 드롭다운 상자에 추가할 옵션에 대한 HTML 코드가 포함됩니다.
- 업데이트 두 번째 드롭다운 상자: JavaScript를 사용하여 응답에서 생성된 옵션으로 두 번째 드롭다운 상자의 HTML을 업데이트합니다. data.
- 두 번째 드롭다운 상자 활성화: 옵션이 업데이트되면 사용자 선택을 위한 두 번째 드롭다운 상자를 활성화합니다.
다음은 예입니다. 이것을 보여주는 것 접근 방식:
tester.php:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('#first_dropdown').change(function() {
var value = $(this).val();
$.ajax({
url: 'update.php',
method: 'POST',
data: { value: value },
success: function(response) {
$('#second_dropdown').html(response);
$('#second_dropdown').prop('disabled', false);
}
});
});
});
</script>
</head>
<body>
<select>update.php:
<?php
if (isset($_POST['value'])) {
$selectedValue = $_POST['value'];
$data = array();
// Here you would typically query your database to retrieve options based on the selected value.
if ($selectedValue == 'category1') {
$data[] = '<option value="option1">Option 1</option>';
$data[] = '<option value="option2">Option 2</option>';
} elseif ($selectedValue == 'category2') {
$data[] = '<option value="option3">Option 3</option>';
$data[] = '<option value="option4">Option 4</option>';
}
echo implode('', $data);
}
?>
이 접근 방식을 따르세요. 를 사용하면 각 드롭다운 상자의 옵션이 이전 드롭다운에서 선택한 항목에 따라 달라지는 다중 레벨 동적 드롭다운 상자를 만들 수 있습니다. 다운박스.
위 내용은 AJAX와 PHP를 사용하여 종속 드롭다운 상자를 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.