동적셀렉트가 제대로 작동을 안하네요
본문
앞선 질문(https://sir.kr/qa/467230?sfl=mb_id%2C1&lstx=visual5868)에 주신 힌트를 보고
조금 수정해봤는데 동적셀렉트에서 ajax의 값을 제대로 못얻어 오는데 어디가 잘못된 것일까요?
1차선택을 하면 2차옵션이 ""에서 "2차분류 선택"으로 변하기는 하는데 나머지 옵션을 못불러오고
ta.php단독 실행해보면 옵션을 잘 추출하고 있습니다..
[동적셀렉트 (select_chagne.php]
<?
include_once('./_common.php');
include_once(G5_THEME_PATH.'/head.php');
?>
<script type="text/javascript" src="http://wdreamdc.com/js/jquery-1.8.3.min.js"></script>
<div class="adressWrap">
<select name="wr_4" class="y1" id="selectID">
<option value="" required>-1차분류 선택-</option>
<!-- 사용할데이터 불러오기 -->
<?
$addr_sql = "select * from g5_shop_category where LENGTH(ca_id) = 2 order by ca_id asc";
$addr_result = sql_query($addr_sql);
while($addr_row = sql_fetch_array($addr_result)){?>
<option value="<?=$addr_row[ca_id]?>"><?=$addr_row[ca_name]?></option>
<?};?>
</select>
<select name="wr_6" class="y2" id="selectID2" required>
</select>
<select name="wr_7" class="y3" id="selectID3" required>
</select>
</div>
<script>
$(document).ready(function(){
$('#selectID').on('change', function(){
var path = window.location.href;
// alert(path+"theme/basic/ajaxPHP.php");
$.post("./ta.php",
{optVal:this.value},
function(data) {
$('#selectID2').empty();
$('#selectID2').append('<option value="">-2차분류 선택-</option>');
$('#selectID2').append(data);
});
});
$('#selectID2').on('change', function(){
var path = window.location.href;
// alert(path+"theme/basic/ajaxPHP.php");
$.post("./ta.php",
{optVal:this.value, optVal2:this.value},
function(data2) {
$('#selectID3').empty();
$('#selectID3').append('<option value="">-3차분류 선택-</option>');
$('#selectID3').append(data2);
});
});
});
</script>
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
[ajax 파일(ta.php)]
<?
include_once('./_common.php');
include_once(G5_THEME_PATH.'/head.php');
$ajax = $_POST['optVal'];
$ajax2 = $_POST['optVal2'];
$option="";
$option2="";
/*
echo("
<script language=javascript>
alert('1차 선택".$ajax."');
</script>
");
*/
$sql="select * from g5_shop_category where LENGTH(ca_id) = 4 and ca_id like '".$ajax."%' order by ca_id asc";
// echo $sql;
$result = sql_query($sql);
while ($row = sql_fetch_array($result))
{
// echo $row['co_gu'];
$option=$option.'<option value="'.$row['ca_id'].'">'.$row['ca_name'].'</option>';
}
echo $option;
$sql2 = "select * from g5_shop_category where LENGTH(ca_id) = 6 and ca_id like '".$ajax."%' order by ca_id asc";
//echo $sql2;
$result2 = sql_query($sql2);
while ($row2 = sql_fetch_array($result2))
{
$option2=$option2.'<option value="'.$row2['ca_id'].'">'.$row2['ca_name'].'</option>';
}
echo $option2;
?>
답변 3
첫번째 문제는 ta.php
include_once(G5_THEME_PATH.'/head.php'); <----삭제하세요
두번째 문제
2차분류 3차분류를 모두 한꺼번에 추출해서 option을 만드는 것이 목적이 아니라면
2차분류를 추출하려고 하면서 3차분류까지 추출해서 echo $option2; 하는 부분 수정하세요
{optVal:this.value, optVal2:this.value}, --> 수정 {optVal2:this.value},
ta.php
if($ajax){ //2차분류
$sql="select ~~~
~~
echo $option;
}else{ // 3차분류 추출
$sql2 = "select *~~ ca_id like '{$ajax2}%' order ~~
~~
echo $option2;
}
ajax호출 부분에서 호출하기전에 다음 코드까지넣으면 완벽하게 될 것입니다
if( !this.value ) return;
이런 에러는 소스만 보고서는 감을 잡기가 쉽지 않습니다.
그리고 환경적인 부분은 사이트 마다 차이가 나기 때문에 소스만 보고 어디가 문제다라고 집는다는게 어렵습니다.
따라서 지금 이슈는 "1차 분류" 선택시 2차 셀렉트 값이 정상적으로 못가지고 와서 그러신거 같은데요.
console.log(data2) <-- 요렇게 해서 데이터를 한번 브라우저 로 출력을 해서 정상적으로 data2를 가지고 오는지 확인을 먼저 해보시기 바랍니다.
data2값을 정상적으로 가지고 면 샛해주는 id값을 확인해보시기 바랍니다.
이렇게 하나씩 찾아보시면 답은 나옵니다.
해보시다 안되면 쪽지 바랍니다.
여기처럼 간단하게 구현해서 배열값을 db조회해서 뿌려주면 되지않을까요?
참고
답변을 작성하시기 전에 로그인 해주세요.
