대>중>소 분류 항목 페이지, 차례로 이동하게 하기
본문
대분류>중분류>소분류 를 관리하는 별도의 테이블을 만들었습니다.
대분류 중분류 소분류 항목을 선택할 수 있는 자식창을 팝업으로 띄워서
사용자가 자신에게 알맞은 value를 선택하게 하는 작업 중입니다.
대>중>소 분류가 현재는 select의 option 값을 선택하게 되어 있는데요.
<form name="global_form" method="post">
<table>
<tr>
<td>분 류</td>
<td>
<select name="SelBigDiv" onchange="BigDivChange()">
<option value="">대분류 선택</option>
<?php
$Big_Sql = " select * from g5_BigDiv order by BigDivOrder asc ";
$Big_Result = sql_query($Big_Sql);
for ($i=0; $Big_Row=sql_fetch_array($Big_Result); $i++) {
if($SelBigDiv == $Big_Row['BigDivNo'])
$BigSelected = 'selected';
else
$BigSelected = '';
echo("
<option value='".$Big_Row['BigDivNo']."' ".$BigSelected.">[".$Big_Row['BigDivNo']."]".$Big_Row['BigDivName']."</option>
");
}
?>
</select>
<select name="SelMediumDiv" onChange="MediumDivChange()">
<option value=''>중분류선택</option>
<?php
$Where_Med_Query = " where BigDivNo='$SelBigDiv'";
$MediumDiv_Sql = " select * from g5_MediumDiv ".$Where_Med_Query." order by MediumDivOrder asc ";
$MediumDiv_Result = sql_query($MediumDiv_Sql);
for ($i=0; $MediumDiv_Row=sql_fetch_array($MediumDiv_Result); $i++) {
if($SelMediumDiv == $MediumDiv_Row['MediumDivNo'])
$MedSelected = 'selected';
else
$MedSelected = '';
echo("
<option value='".$MediumDiv_Row['MediumDivNo']."' ".$MedSelected.">[".$MediumDiv_Row['MediumDivNo']."]".stripslashes($MediumDiv_Row['MediumDivName'])."</option>
");
}
?>
</select>
</td>
</tr>
</table>
<section class="cbox">
<table>
<?php
$OrderCount = 1;
for ($i=0; $row=sql_fetch_array($result); $i++) {
$MediumDiv;
$Med_Sql = " select count(*) as cnt from g5_Div where BigDivNo='$row[BigDivNo]' and MediumDivNo='$row[MediumDivNo]' and DivNo='$row[DivNo]'";
$Med_Row = sql_fetch($Med_Sql);
$DivCount = $Med_Row['cnt'];
?>
<tr>
<td>
<div id="Order_<?php echo $OrderCount;?>">
<table>
<tr>
<td id="LockID_<?php echo $row[DivNo]?>" onclick="ClickLock(this,'<?php echo $row[DivNo]?>');document.getElementById('IsShow').value='Y';" onmouseover="ColorChange(this,'#F3F9FA','#3C7791','bold','<?php echo $row[DivNo]?>')" onmouseout="ColorChange(this,'','','','<?php echo $row[MediumDivNo]?>')" style="cursor:pointer;padding-left:15px" />[<?php echo $row[BigDivNo].$row[MediumDivNo].$row[DivNo]; ?>]<?php echo $row[DivName]?>
</td>
</tr>
</table>
</div>
</td>
</tr>
<?php
$OrderCount++;
}
?>
</table>
</section>
</form>
이것을
1) 대분류 항목들을 select 처리하지 않고 그대로 노출하고,
2) 대분류 항목 중에서 특정 항목을 선택하면
3) 중분류 페이지로 이동하고(혹은 대분류 항목이 사라지고)
대분류에서 선택했던 항목과 연결된 중분류 항목이 나타나게 하려고 합니다.
4) 소분류로의 이동도 1)~3)과 동일
며칠 간 작업으로 심한 몸살로 몸상태가 엉망이라
제가 제대로 설명을 했는지 모르겠어요ㅜㅜ
이것을 어떻게 구현해야 하는지 살펴주시면 감사하겠습니다.(__)
답변 1
보통 단계별 셀렉트의 경우 첫번째 셀렉트박스만 DB불러오고
선택시 선택값을 AJAX 로 별도페이지에서 소스를받아서
두번째 셀렉트에 innerHTML 해주시면 됩니다.
1. 첫번째 셀렉트박스 DB뿌려줘서 리스트채우기
2. 첫번째 셀렉트 선택시 자바스크립트로 해당값과 셀렉트순번을 받아서 AJAX 호출
3. 호출받는 페이지에서 넘어온 인자값으로 해당하는 셀렉트코드를 뿌려줌..
4. 넘어온 AJAX 내용을 innerHTML 등으로 해당하는 셀렉트박스에 넣어줌.
로핑님,
저의 두번째 질문까지 상세히 설명해 주셔서 너무 감사합니다.
그런데 자바스크립트와 아작스를 아직 공부하지 못해서 계속 구글링을 했지만 제대로 개념에 접근을 못했습니다. 그러다가 질문을 올리게 됐네요. 죄송합니다ㅜㅜ
대분류 나열(array) A B C D ...
>>이 중에 A를 클릭하면 중분류 A 연관 페이지로 이동
중분류 나열(array) a1 a2 a3 a4 ...
>>이 중에 a1을 클릭하면 소분류 a1 연관 페이지로 이동
소분류 나열(array) u1 u2 u3 u4 ...
------------------------------------------------
추가로 질문을 드려 죄송하지만,
1) 중분류 소분류에 해당하는 별도 페이지는 php로 다시 짜 주어야 하는 것인지요?
2) 호출하는 아작스나 자바스크립트의 예제를 볼 수 있는 곳이 있을까요?
※ 추가 질문 드려 죄송합니다 (__)
