여분필드를 한번에 불러오는 방법
게시판 예시로 옵션 선택창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개
옵션1에서 선택한 값에 따라 옵션2의 값이 변경되어야하는 부분인걸로 생각됩니다.
마치 예전에 주소록 보시면 구를 선택하면 동을 선택하듯이 말이죠..
이런경우 javascript ajax 를 활용하여 적용하시면될꺼 같습니다.
아래 예제 코드를 한번 안내드리오니 참고 하셔서 응용적용을 해보시길 바라겠습니다.
// 옵션 선택 예시
</p>
<p><!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></p>
<p> <label for="option2">옵션 선택창 2:</label>
<select id="option2" name="option2">
<option value="">옵션1을 먼저 선택하세요</option>
<!-- 옵션2 데이터가 여기 로드됨 -->
</select>
</form></p>
<p> <script src="<a href="https://code.jquery.com/jquery-3.6.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.6.0.min.js"></script></a>
<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));
});
}
});</p>
<p> // 옵션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></p>
<p>
// PHP 쪽 파일 부분
</p>
<p><?php
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);</p>
<p> $option1 = isset($_GET['option1']) ? $_GET['option1'] : '';</p>
<p> 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();
}
</p>
<p>
위에 소스코드는 참고용이오니...이부분을 참고 하셔서 적용하시면 도움이 되실겁니다.
해보시다 안되시면 쪽지주시면 도움드리겠습니다.
댓글을 작성하려면 로그인이 필요합니다.
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><?php</p>
<p>$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>';</p>
<p> </p>
<p>$opt_1_selected = empty($_REQUEST['opt_1']) == false ? $_REQUEST['opt_1'] : '';</p>
<p>if (empty($opt_1_selected) == false) {</p>
<p> $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>';</p>
<p>}</p>
<p>?></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인