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에서 목록을 불러 와서 추가된 셀렉트박스에 띄워줍니다.
해당예제는 4단 카테고리입니다.