select 숫자만큼 input ajax 불러서 처리하는 과정에서 문제가 있어요.
관련링크
본문
안녕하세요.
다시 한번 도움을 요청드립니다.
제이앤님께서 큰 도움을 주셔서 기능을 구현했는데요,
문제가 발생했습니다.
예를 들어 지역 개수를 3개 선택하고 서울+금천구, 서울+양천구, 서울+강동구 이렇게 저장하면, 맨 마지막 서울+강동구만 남게 됩니다.
저는 해결방법을 잘 모르겠습니다. 혹시 혜안을 주실 수 있을까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Select Box</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="form-group">
<label for="regionCount">지역 개수 선택</label>
<select id="regionCount" class="form-control" onchange="addRegionSelects(this.value)">
<option value="">개수를 선택하세요</option>
<option value="1">1개</option>
<option value="2">2개</option>
<option value="3">3개</option>
<option value="4">4개</option>
<option value="5">5개</option>
</select>
</div>
<div id="regionSelects"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const regionOptions = `
<option value="">지역을 선택하세요</option>
<option value="서울">서울</option>
<option value="부산">부산</option>
<option value="대구">대구</option>
<option value="인천">인천</option>
<option value="대전">대전</option>
<option value="광주">광주</option>
<option value="울산">울산</option>
<option value="경기">경기</option>
<option value="강원">강원</option>
<option value="경북">경북</option>
<option value="경남">경남</option>
<option value="전북">전북</option>
<option value="전남">전남</option>
<option value="세종">세종</option>
<option value="충북">충북</option>
<option value="충남">충남</option>
<option value="제주">제주</option>
<option value="없음">없음</option>
`;
function addRegionSelects(count) {
const container = document.getElementById('regionSelects');
container.innerHTML = '';
for (let i = 0; i < count; i++) {
const regionSelect = document.createElement('div');
regionSelect.className = 'form-group';
regionSelect.innerHTML = `
<label for="wr_3_${i}">지역 ${i + 1}</label>
<select name="wr_3[]" id="wr_3_${i}" class="form-control" onchange="item_Search(this.value, ${i})">
${regionOptions}
</select>
<label for="gungu_${i}"><span class="sound_only">시/군/구 ${i + 1}</span></label>
<select name="gungu[]" id="gungu_${i}" class="form-control">
<option value="">시/군/구</option>
</select>
`;
container.appendChild(regionSelect);
}
}
function item_Search(region, index) {
const gunguSelect = document.getElementById(`gungu_${index}`);
gunguSelect.innerHTML = '<option value="">시/군/구</option>';
if (region === "") return;
$.ajax({
type: "post",
async: false,
cache: false,
data: { item1: region },
dataType: "xml",
url: "/ajax/ajax.sidomake.php",
success: function (xml) {
if ($(xml).find("list").find("item").length > 0) {
$(xml).find("list").find("item").each(function () {
const names = $(this).find("names").text();
gunguSelect.innerHTML += `<option value="${names}">${names}</option>`;
});
}
}
});
}
</script>
</body>
</html>
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<?php
$wr_3 = isset($_POST['wr_3']) == true ? $_POST['wr_3'] : [];
$gungu = isset($_POST['gungu']) == true ? $_POST['gungu'] : [];
if (is_array($wr_3) == true && is_array($gungu) == true && count($wr_3) == count($gungu)) {
foreach ($wr_3 as $k => $v) {
if (empty($wr_3[$k]) == false && empty($gungu[$k]) == false) {
echo '$wr_3[' . $k . '] : ' . $wr_3[$k] . ', ';
echo '$gungu[' . $k . '] : ' . $gungu[$k] . '<br>';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Select Box</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<form method="post" action="">
<div class="form-group">
<label for="regionCount">지역 개수 선택</label>
<select id="regionCount" class="form-control" onchange="addRegionSelects(this.value)">
<option value="">개수를 선택하세요</option>
<option value="1">1개</option>
<option value="2">2개</option>
<option value="3">3개</option>
<option value="4">4개</option>
<option value="5">5개</option>
</select>
</div>
<div id="regionSelects"></div>
<input type="submit">
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const regionOptions = `
<option value="">지역을 선택하세요</option>
<option value="서울">서울</option>
<option value="부산">부산</option>
<option value="대구">대구</option>
<option value="인천">인천</option>
<option value="대전">대전</option>
<option value="광주">광주</option>
<option value="울산">울산</option>
<option value="경기">경기</option>
<option value="강원">강원</option>
<option value="경북">경북</option>
<option value="경남">경남</option>
<option value="전북">전북</option>
<option value="전남">전남</option>
<option value="세종">세종</option>
<option value="충북">충북</option>
<option value="충남">충남</option>
<option value="제주">제주</option>
<option value="없음">없음</option>
`;
function addRegionSelects(count) {
const container = document.getElementById('regionSelects');
container.innerHTML = '';
for (let i = 0; i < count; i++) {
const regionSelect = document.createElement('div');
regionSelect.className = 'form-group';
regionSelect.innerHTML = `
<label for="wr_3_${i}">지역 ${i + 1}</label>
<select name="wr_3[]" id="wr_3_${i}" class="form-control" onchange="item_Search(this.value, ${i})">
${regionOptions}
</select>
<label for="gungu_${i}"><span class="sound_only">시/군/구 ${i + 1}</span></label>
<select name="gungu[]" id="gungu_${i}" class="form-control">
<option value="">시/군/구</option>
</select>
`;
container.appendChild(regionSelect);
}
}
function item_Search(region, index) {
const gunguSelect = document.getElementById(`gungu_${index}`);
gunguSelect.innerHTML = '<option value="">시/군/구</option>';
if (region === "") return;
$.ajax({
type: "post",
async: false,
cache: false,
data: { item1: region },
dataType: "xml",
url: "/ajax/ajax.sidomake.php",
success: function (xml) {
if ($(xml).find("list").find("item").length > 0) {
$(xml).find("list").find("item").each(function () {
const names = $(this).find("names").text();
gunguSelect.innerHTML += `<option value="${names}">${names}</option>`;
});
}
}
});
}
</script>
</body>
</html>
크으~ 이렇게 하니까 잘 저장이 됩니다. 정말 감사합니다. 복 받으실거에요. ^^
