Select BOX 선택시 ajax 통신/ 동적으로 select option 추가 하기 정보
Select BOX 선택시 ajax 통신/ 동적으로 select option 추가 하기관련링크
첨부파일
본문
안녕하세요 Korean Leo 입니다
해당 url로 가면 비쥬얼 스튜디오 코드 스킨으로 보실수 있습니다.
http://koreanleo.com/bbs/board.php?bo_table=javascript&wr_id=7
오늘 소개드릴 것은 Select BOX (1번 선택) 선택시 ajax통신을 이용한 동적 Selext BOX (2번 추가) 추가하기입니다.
사용 UI
다음은 PHP와 javaScript코드입니다.
<div class="adressWrap">
<select name="wr_4" class="y1" id="selectID">
<option value="" required>선택해주세요</option>
<!-- 사용할데이터 불러오기 -->
<?php
$sql="SELECT DISTINCT `쿼리` FROM `쿼리`";
$result = sql_query($sql);
while ($row = sql_fetch_array($result))
{
echo '<option value="'.$row['쿼리'].'">'.$row['쿼리'].'</option>';
}
?>
</select>
<select name="wr_6" class="y2" id="selectID2" required>
</select>
</div>
<script>
$(document).ready(function(){
$('#selectID').on('change', function(){
var path = window.location.href;
// alert(path+"theme/basic/ajaxPHP.php");
$.post(path+"theme/basic/ajaxPHP.php",{optVal:this.value}, function(data) {
$('#selectID2').empty();
$('#selectID2').append('<option value="">선택해주세요</option>');
$('#selectID2').append(data);
});
});
});
</script>
ajaxPHP.php 파일
<?php
include_once('./_common.php');
$ajax = $_POST['optVal'];
$option="";
$sql="SELECT `쿼리` FROM `쿼리` WHERE `쿼리`=\"".$ajax."\"";
// echo $sql;
$result = sql_query($sql);
while ($row = sql_fetch_array($result))
{
// echo $row['co_gu'];
$option=$option.'<option value="'.$row['쿼리'].'">'.$row['쿼리'].'</option>';
}
echo $option;
?>
사용 사이트 http://guseo.gabia.io/
8
댓글 0개