HTML 부분
<form id="fm" name="fm" method="get" action="list.php"> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td> <select id="sel1" name="sel1" onchange="update_cate1()" style="width:140px;"><!--1차--> <option value="">--메이커--</option> <!--1단은 db에서 목록 받아와서 뿌려줌--> <!--? while($sbvrow=mysql_fetch_array($sbvlist)) { echo "<option value='$sbvrow[category]'---->$sbvrow[catnm]"; } ?> </select> </td> <td id="catetd2" name="catetd2" style="padding-left:3px;"> <!--sel2 셀렉트박스 들어옴--> </td> </tr> <tr> <td id="catetd3" name="catetd3" style="padding-top:5px;"> <!--sel3 셀렉트박스 들어옴--> </td> <td id="catetd4" name="catetd4" style="padding-top:5px;padding-left:3px;"> <!--sel4 셀렉트박스 들어옴--> </td> </tr> </tbody></table> </form>
JS 부분
//-----------------------1단----------------------------- function update_cate1() { var cateval = $('#sel1').attr('value'); $.get('get_cate.php?cateval=' + cateval,show_cates1); } function show_cates1(res){ $('#catetd2').html(res); $('#catetd3').html(""); $('#catetd4').html(""); } //-----------------------1단----------------------------- //-----------------------2단----------------------------- function update_cate2() { var cateval = $('#sel2').attr('value'); $.get('get_cate2.php?cateval=' + cateval,show_cates2); } function show_cates2(res2){ $('#catetd3').html(res2); $('#catetd4').html(""); } //-----------------------2단----------------------------- //-----------------------3단----------------------------- function update_cate3() { var cateval = $('#sel3').attr('value'); $.get('get_cate3.php?cateval=' + cateval,show_cates3); } function show_cates3(res3){ $('#catetd4').html(res3); } //-----------------------3단-----------------------------
get_cate1.php, get_cate2.php, get_cate3.php의 소스
$sbvconn=mysql_connect($db_host,$db_user,$db_pass); mysql_select_db($db_name, $sbvconn); //카테고리 구분자 퍼옴 // ex)카테고리이름 // 제조사 Acrua -> 년도 2011 -> 모델명 hyhf05 -> 기타 추가품 HKI005 // 001 -> 001002 -> 001002001 -> 001002001004 $cateval = $_REQUEST['cateval']; $cateval_len=strlen($cateval); $sbvsql = "셀렉트 박스에 넣을 목록 쿼리"; //ex)"SELECT * FROM category where CHARACTER_LENGTH(category)=9 and LEFT(category,6)='".$cateval."' order by sno"; $sbvlist=mysql_query($sbvsql, $sbvconn); $sbvnum = mysql_num_rows($sbvlist); $sbvnum=$sbvnum+1; //결과 없을경우 셀박스를 띄우기 않음 if($sbvnum>1){ //아래 셀렉트 박스 id 와 네임을 2단(get_cate2.php)의 경우 sel3 3단(get_cate3.php)의 경우 sel4 echo "<select id="sel2" name="sel2" style="width:140px" onchange="update_cate2()">"; echo "<option value="\"\"">--년도--</option>"; while($sbvrow=mysql_fetch_array($sbvlist)){ echo"<option value="$sbvrow[category]">$sbvrow[catnm]</option>"; $i++; } echo "</select>"; }else{ }
셀렉트 박스 목록을 클릭시 마다 해당 카테고리의 목록을 db에서 목록을 불러 와서 추가된 셀렉트박스에 띄워줍니다.
활용하기에 따라 무한 반복 가능합니다
DB에 넣을 카테고리의 항목은 번호,카테고리구분자,카테고리이름 필드의 형태가 좋구여.
해당예제는 4단 카테고리입니다.