목록으로

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

쎄쇼마루 1년 전 조회 4,370

답변 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개

정렬:

채택된 답변

+20 포인트

배르만

1년 전

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

</p>

<p><?php

$wr_3 = isset($_POST['wr_3']) == true ? $_POST['wr_3'] : [];

$gungu = isset($_POST['gungu']) == true ? $_POST['gungu'] : [];</p>

<p>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] . '
';

        }

    }

}

?></p>

<p><!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="<a href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css"></a>

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

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>

`;</p>

<p>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);

    }

}</p>

<p>function item_Search(region, index) {

    const gunguSelect = document.getElementById(`gungu_${index}`);

    gunguSelect.innerHTML = '<option value="">시/군/구</option>';

    if (region === "") return;</p>

<p>    $.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></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

쎄쇼마루

1년 전

크으~ 이렇게 하니까 잘 저장이 됩니다. 정말 감사합니다. 복 받으실거에요. ^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

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

답변 1개

답변에 대한 댓글 1개

공유하기