여분필드를 한번에 불러오는 방법
본문
게시판 예시로
옵션 선택창1 - 옵션 선택창 2
이렇게 2개의 선택창이 있습니다.
옵션 선택창 1 에는 회원에 등록되어있는 모든 mb_1를 불러오도록 하고싶고
옵션 선택창 2에는 옵션1에서 선택한 항목에 따라 mb_2를 불러오게 하고싶습니다.
예시로
회원1 mb_1= 사과 mb_2=나무
회원2 mb_1= 사과 mb_2=꽃
회원3 mb_1= 오렌지 mb_2=돌
이런식으로 되어있으면
옵션선택창1
사과
오렌지
여기서 사과를 선택하면
옵션선택창2
나무
꽃
옵션선택창1 에서 오렌지를 선택하면
옵션선택창2
돌
이렇게 출력되도록 하고싶은데 방법 없을까요?
답변 2
다음 코드가 도움이 될지 모르겠습니다.
<?php
$opt_1 = '';
$sql = " SELECT DISTINCT mb_1 opt_1 FROM {$g5['member_table']} ";
$result = sql_query($sql);
while ($row = sql_fetch_array($result)) {
$opt_1 .= '<option value="' . $row['opt_1'] . '">' . $row['opt_1'] . '</option>';
}
$opt_1 = '<select name="opt_1">' . $opt_1 . '</select>';
$opt_1_selected = empty($_REQUEST['opt_1']) == false ? $_REQUEST['opt_1'] : '';
if (empty($opt_1_selected) == false) {
$opt_2 = '';
$sql = " SELECT DISTINCT mb_2 opt_2 FROM {$g5['member_table']} WHERE mb_1 = {$opt_1_selected} ";
$result = sql_query($sql);
while ($row = sql_fetch_array($result)) {
$opt_2 .= '<option value="' . $row['opt_2'] . '">' . $row['opt_2'] . '</option>';
}
$opt_2 = '<select name="opt_2">' . $opt_2 . '</select>';
}
?>
옵션1에서 선택한 값에 따라 옵션2의 값이 변경되어야하는 부분인걸로 생각됩니다.
마치 예전에 주소록 보시면 구를 선택하면 동을 선택하듯이 말이죠..
이런경우 javascript ajax 를 활용하여 적용하시면될꺼 같습니다.
아래 예제 코드를 한번 안내드리오니 참고 하셔서 응용적용을 해보시길 바라겠습니다.
// 옵션 선택 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>옵션 선택 예시</title>
</head>
<body>
<form>
<label for="option1">옵션 선택창 1:</label>
<select id="option1" name="option1">
<option value="">선택하세요</option>
<!-- 옵션1 데이터가 여기 로드됨 -->
</select>
<label for="option2">옵션 선택창 2:</label>
<select id="option2" name="option2">
<option value="">옵션1을 먼저 선택하세요</option>
<!-- 옵션2 데이터가 여기 로드됨 -->
</select>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 페이지 로드 시 옵션1 데이터를 불러오기
$.ajax({
url: 'get_options.php',
type: 'GET',
dataType: 'json',
success: function(data) {
const option1 = $('#option1');
data.option1.forEach(function(item) {
option1.append(new Option(item, item));
});
}
});
// 옵션1 선택 변경 시 옵션2 데이터 불러오기
$('#option1').change(function() {
const selectedOption1 = $(this).val();
$.ajax({
url: 'get_options.php',
type: 'GET',
dataType: 'json',
data: { option1: selectedOption1 },
success: function(data) {
const option2 = $('#option2');
option2.empty();
if (data.option2.length > 0) {
data.option2.forEach(function(item) {
option2.append(new Option(item, item));
});
} else {
option2.append(new Option('해당 옵션에 대한 결과가 없습니다', ''));
}
}
});
});
});
</script>
</body>
</html>
// PHP 쪽 파일 부분
<?php
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$option1 = isset($_GET['option1']) ? $_GET['option1'] : '';
if ($option1 === '') {
// 옵션1 데이터를 불러오기
$stmt = $pdo->query("SELECT DISTINCT mb_1 FROM members");
$option1_data = $stmt->fetchAll(PDO::FETCH_COLUMN);
echo json_encode(['option1' => $option1_data]);
} else {
// 옵션2 데이터를 불러오기
$stmt = $pdo->prepare("SELECT mb_2 FROM members WHERE mb_1 = :option1");
$stmt->execute(['option1' => $option1]);
$option2_data = $stmt->fetchAll(PDO::FETCH_COLUMN);
echo json_encode(['option2' => $option2_data]);
}
} catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
위에 소스코드는 참고용이오니...이부분을 참고 하셔서 적용하시면 도움이 되실겁니다.
해보시다 안되시면 쪽지주시면 도움드리겠습니다.
답변을 작성하시기 전에 로그인 해주세요.
