PHP＆Server ajax를 이용한 시/도, 구/군, 동(주소검색) 셀렉트 박스
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-28 08:59
조회view: 13
본문
ajax를 이용한 시/도, 구/군, 동(주소검색) 셀렉트 박스
css
.ajax_sido {}
.ajax_sido:after {display:block;visibility:hidden;clear:both;content:""}
.ajax_sido h3 {display:block;margin:0 0 12px 0;font-size:16px;font-weight:700;}
.ajax_sido .select {float:left;width:32%;margin:0 2% 0 0;}
.ajax_sido .select:last-child {margin:0;}html
<?php
$sql = " select sido from zipcode group by sido asc";
$result = sql_query($sql);
?>
<div class="ajax_sido">
<h3>시/도, 구/군 ajax </h3>
<span class="select">
<select name="sido" id="sido" required>
<option value="">시/도</option>
<?php for ($i=0; $row=sql_fetch_array($result); $i++) { ?>
<option value="<?php echo $row['sido']; ?>"><?php echo $row['sido']; ?></option>
<?php } ?>
</select>
</span>
<span class="select">
<select name="gugun" id="gugun" required>
<option value="">구/군</option>
</select>
</span>
<span class="select">
<select name="dong" id="dong" required>
<option value="">읍/면/동</option>
</select>
</span>
</div>jQuery/Javascript
$(document).ready(function() {
$('#sido').on('change', function(){
var sido = $("#sido").val();
$.ajax({
url: "<?php echo G5_URL; ?>/pages/ajax.gugun.php",
dataType: 'text',
type: 'post',
data:{
'sido':sido
},
success: function(data) {
$('#gugun').empty();
$('#gugun').append('<option value="">선택하세요</option>');
$('#gugun').append(data);
}
});
});
$('#gugun').on('change', function(){
var sido = $("#sido").val();
var gugun = $("#gugun").val();
$.ajax({
url: "<?php echo G5_URL; ?>/pages/ajax.dong.php",
dataType: 'text',
type: 'post',
data:{
'sido':sido,
'gugun':gugun
},
success: function(data) {
$('#dong').empty();
$('#dong').append('<option value="">선택하세요</option>');
$('#dong').append(data);
}
});
});
});php
//ajax.gugun.php
include_once('../common.php');
if($sido) {
$sql = " select gugun from zipcode where (INSTR(sido, '$sido')) group by gugun asc";
$result = sql_query($sql);
$option = '';
while ($row = sql_fetch_array($result)) {
$option = $option."<option value='".$row['gugun']."'>".$row['gugun']."</option>";
}
echo $option;
}
//ajax.dong.php
include_once('../common.php');
if($gugun) {
$sql = " select dong from zipcode where (INSTR(sido, '$sido')) and (INSTR(gugun, '$gugun')) group by dong asc";
$result = sql_query($sql);
$option = '';
while ($row = sql_fetch_array($result)) {
if($gugun != $row['dong']) {
$option = $option."<option value='".$row['dong']."'>".$row['dong']."</option>";
}
}
echo $option;
}