◈ 질문 작성 시 패스워드는 게시판 암호와 다르게
자신만의 암호로
설정바랍니다. ◈
+
이름
+
이메일
+
홈페이지
+
제목
+
관련링크
+
문서유형
분류
강화학습 이론 및 실습
객체지향언어
인공지능
웹서버프로그래밍
자료구조
컴퓨터언어2
비공개
<table border="1" cellpadding="1" cellspacing="1" style="width: 600px; border-collapse: collapse;"> <tbody> <tr> <td>구글 검색</td> <td><a href="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">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</a></td> </tr> <tr> <td colspan="2" style="text-align: center;"> </td> </tr> <tr> <td colspan="2" style="text-align: center;">위 사이트 내용</td> </tr> <tr> <td colspan="2"><span style="color: red; background-color: yellow;">셀렉트</span> 박스3개를 AJAX 처리하여 <span style="color: red; background-color: yellow;">동적</span>으로 하위 카테고리가<br /> 표시되는 것을 만들던중 jquery 를 사용해서 적절하게 해보자 해서<br /> 만들어 본 예제입니다. jquery를 모를때는 힘들었던 기억이 -_-.. 있는데요.<br /> <br /> 아래처럼 3단 ajax <span style="color: red; background-color: yellow;">셀렉트</span> 박스가 여러셋트로 나오더라도 (<span style="color: red; background-color: yellow;">동적</span> 추가가 되더라도)<br /> 잘 작동되는 예제가 되었습니다.<br /> 서버쪽 소스는 없지만 아래 코드가 도움이 될까해서 올려봅니다 ^^;<br /> <br /> <br /> <form name="form1" method="get" action=""><br /> <br /> <div><br /> <select name="code1" onchange="setComboBox(this)" style="width:100px;"><br /> <option value="">- 전체 -</option><br /> <?makeCode1Option();?><br /> </select><br /> <select name="code2" onchange="setComboBox(this)" style="width:100px;"><br /> <option value="">- 전체 -</option><br /> </select><br /> <select name="code3" style="width:100px;"><br /> <option value="">- 전체 -</option><br /> </select><br /> </div><br /> <br /> <div><br /> <select name="code1" onchange="setComboBox(this)" style="width:100px;"><br /> <option value="">- 전체 -</option><br /> <?makeCode1Option();?><br /> </select><br /> <select name="code2" onchange="setComboBox(this)" style="width:100px;"><br /> <option value="">- 전체 -</option><br /> </select><br /> <select name="code3" style="width:100px;"><br /> <option value="">- 전체 -</option><br /> </select><br /> </div><br /> <br /> ... 반복도 가능<br /> <br /> </form><br /> <br /> <br /> <script type="text/javascript"><br /> <br /> function setComboBox(o){<br /> var code = o.value;<br /> var div = $(o).parent(); // <span style="color: red; background-color: yellow;">셀렉트</span> 박스의 상위 객체<br /> var cnt = $('select', div).size(); // <span style="color: red; background-color: yellow;">셀렉트</span> 박스 갯수<br /> var idx = $('select', div).index(o); // 현재 <span style="color: red; background-color: yellow;">셀렉트</span> 박스의 순서<br /> var depth = cnt - 1 + idx;<br /> var combo = $('select', div).eq(idx + 1);<br /> var text = '<option value="">- 전체 -</option>';<br /> <br /> if(code == ''){ // 전체를 선택했을 경우<br /> $('select:gt(' + idx + ')', div).html(text);<br /> return;<br /> }<br /> <br /> $.post('/include/util/code_data.php', {depth:depth, code:code}, function(rst){<br /> var data = eval('(' + rst + ')');<br /> var loop = data.length;<br /> $('select:gt(' + idx + ')', div).html(text);<br /> for(var i=0 ; i<loop ; i++){<br /> combo.append('<option value="' + data[i].code + '">' + data[i].name + '</option>');<br /> }<br /> });<br /> }<br /> <br /> </script><br /> <br /> 수정된 스크립트 다시 올립니다. - 10.01.15</td> </tr> </tbody></table><p> </p>
+
파일첨부1
+
파일첨부2
+
패스워드
+ 본 게시판은 글 게시후 수정 및 삭제가 불가능하도록 설정되어 있습니다.
+ 패스워드를 입력해 주셔야 글 수정 및 삭제가 가능합니다.
+ 업로드는 10MB 까지 가능합니다.
+ 업로드는 링크도 가능합니다.(링크방법 : http://www.kimsmall21.com/xxx.gif)
+ 파일첨부시 두개의 파일을 모두 업로드할 경우, 첨부파일1만 자동실행됩니다.
+ 욕설 및 기타 성격에 맞지 않는 글은 삼가 주세요.