기말과제 질문/답변 게시판

구글 검색	https://www.google.co.kr/?gws_rd=ssl#q=jQuery+%EC%97%AC%EB%9F%AC+%EA%B0%9C%EC%9D%98+select+%EC%98%88%EC%A0%9C+PHP&spf=1497510745720

위 사이트 내용
셀렉트 박스3개를 AJAX 처리하여 동적으로 하위 카테고리가 표시되는 것을 만들던중 jquery 를 사용해서 적절하게 해보자 해서 만들어 본 예제입니다. jquery를 모를때는 힘들었던 기억이 -_-.. 있는데요. 아래처럼 3단 ajax 셀렉트 박스가 여러셋트로 나오더라도 (동적 추가가 되더라도) 잘 작동되는 예제가 되었습니다. 서버쪽 소스는 없지만 아래 코드가 도움이 될까해서 올려봅니다 ^^; <form name="form1" method="get" action=""> <div> <select name="code1" onchange="setComboBox(this)" style="width:100px;"> <option value="">- 전체 -</option> <?makeCode1Option();?> </select> <select name="code2" onchange="setComboBox(this)" style="width:100px;"> <option value="">- 전체 -</option> </select> <select name="code3" style="width:100px;"> <option value="">- 전체 -</option> </select> </div> <div> <select name="code1" onchange="setComboBox(this)" style="width:100px;"> <option value="">- 전체 -</option> <?makeCode1Option();?> </select> <select name="code2" onchange="setComboBox(this)" style="width:100px;"> <option value="">- 전체 -</option> </select> <select name="code3" style="width:100px;"> <option value="">- 전체 -</option> </select> </div> ... 반복도 가능 </form> <script type="text/javascript"> function setComboBox(o){ var code = o.value; var div = $(o).parent(); // 셀렉트 박스의 상위 객체 var cnt = $('select', div).size(); // 셀렉트 박스 갯수 var idx = $('select', div).index(o); // 현재 셀렉트 박스의 순서 var depth = cnt - 1 + idx; var combo = $('select', div).eq(idx + 1); var text = '<option value="">- 전체 -</option>'; if(code == ''){ // 전체를 선택했을 경우 $('select:gt(' + idx + ')', div).html(text); return; } $.post('/include/util/code_data.php', {depth:depth, code:code}, function(rst){ var data = eval('(' + rst + ')'); var loop = data.length; $('select:gt(' + idx + ')', div).html(text); for(var i=0 ; i<loop ; i++){ combo.append('<option value="' + data[i].code + '">' + data[i].name + '</option>'); } }); } </script> 수정된 스크립트 다시 올립니다. - 10.01.15