select 숫자만큼 div 추가하여 ajax 불러드리고 싶습니다.
관련링크
본문
안녕하세요.
선생님들의 도움이 필요해서요.
현재 아래와 같은 구성으로 정상 서비스를 하고 있는데요,
지역을 더 추가하고 싶어서 찾아보니
위와 같은 게시글이 있더라고요.
그런데 문제는 시/군/구를 ajax로 불러오는데 만약 지역을 여러 개 추가할 때 입니다.
지역을 3개 추가하겠다고 선택하면,
시/군/구까지 불러와서 처리해야 하는데 도통 감이 안잡힙니다.
혹시 도와주실 수 있을까요?
<label for="wr_3">지역</label>
<select name="wr_3" id="wr_3" class="frm_input half_input" onChange="item_Search(this.value)">
<option value="" selected> 지역을 선택하세요</option>
<?php
$wr_3_arr = array("서울","부산","대구","인천","대전","광주","울산","경기","강원","경북","경남","전북","전남","세종","충북","충남","제주","없음");
foreach($wr_3_arr as $value) {
?>
<option value="<?php echo $value ?>"<?php echo $sido==$value ? " selected" : ""; ?>> <?php echo $value ?></option>
<?php } ?>
</select>
<label for="gungu"><span class="sound_only">시/군/구</span></label>
<select name="gungu" id="gungu" required class="frm_input half_input">
<?php if ($wr['wr_3_1']) { ?>
<option value="<?php echo $gungu ?>" selected><?php echo $gungu ?></option>
<?php } else { ?>
<option value=""> 시/군/구</option>
<?php } ?>
</select>
<script>
function item_Search(Args){
$('#gungu').empty();
$('#gungu').append('<option value="">시/군/구</option>');
if (Args == "")
return;
$.ajax({
type : "post",
async : false,
cache : false,
data : {"item1":Args},
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(i){
var names = $(this).find("names").text();
$('#gungu').append('<option value="'+names+'">'+names+'</option>');
});
}
}
});
}
</script>
답변 1
아래의 코드를 한번 참고를 해보시기 바랍니다.
<!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>
제이앤님! 캬아~ 너무 잘됩니다. 정말 고맙습니다. ^^