그누보드 QA - select 숫자만큼 input ajax 불러서 처리하는 과정에서 문제가 있어요.

select 숫자만큼 input ajax 불러서 처리하는 과정에서 문제가 있어요.

쎄쇼마루 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.07.29 16:58:23 3120 (211.♡.♡.113)

답변 1

본문

안녕하세요.

다시 한번 도움을 요청드립니다.

제이앤님께서 큰 도움을 주셔서 기능을 구현했는데요,

문제가 발생했습니다.

예를 들어 지역 개수를 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>

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>

#그누보드5 #php

답변 1

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-07-29 17:28:16 221.♡.♡.6

다음 코드가 도움이 될지 모르겠습니다.


<?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>