◈ 질문 작성 시 패스워드는 게시판 암호와 다르게 자신만의 암호로 설정바랍니다. ◈
    정성훈
    jQuery로 3단 카테고리 셀렉트 사용 방법
  https://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=70863&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B5%BF%C0%FB+%BC%BF%B7%BA%C6%AE&sop=and



구글 검색 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

 

  등록일 : 2017-06-15 [17:17] 조회 : 1531 다운 : 0   
 
△ 이전글학과개인서버 Pydio 로그인 관하여 질문드립니다.
▽ 다음글기말과제 참고자료
기말과제 질문/답변 게시판
번호 제 목 이름 조회 등록일
54 l학과개인서버 Pydio 로그인 관하여 질문드립니다. 웹서버프로그래밍 김리나 161 03-26
53 ljQuery로 3단 카테고리 셀렉트 사용 방법 웹서버프로그래밍 정성훈 1531 06-15
52 기말과제 참고자료 비공개 객체지향언어 윤채현 41 12-16
51 기말과제 질문 드립니다. 비공개 객체지향언어 양은지 9 12-10
50 └❶ 기말과제 질문 드립니다. 비공개 객체지향언어 정성훈 9 12-11
49 회원정보 저장 문제관련하여 질문드립니다. 비공개 웹서버프로그래밍 정현진 23 06-20
48 └❶ 회원정보 저장 문제관련하여 질문드립니다. 비공개 웹서버프로그래밍 정성훈 19 06-21
47 함수 동시실행(타이머) 자료구조 박윤재 921 06-19
46 └❶ 함수 동시실행(타이머) 자료구조 정성훈 928 06-19
45 php와 mysql연결 질문 있습니다. 비공개 웹서버프로그래밍 정현진 31 06-18
44 └❶ php와 mysql연결 질문 있습니다. 비공개 웹서버프로그래밍 정성훈 17 06-19
43    └❷ php와 mysql연결 질문 있습니다. 비공개 웹서버프로그래밍 정현진 19 06-19
42 extplorer상에 DB구축 웹서버프로그래밍 정지수 1046 06-12
41 └❶ extplorer상에 DB구축 웹서버프로그래밍 정성훈 1237 06-12
40 기말과제 질문드립니다. 자료구조 이다혜 1207 06-11

[1][2][3][4]