웹마스터 팁

  2. Support
  3. 웹마스터 팁

상위 셀렉트박스 값 변경시 하위셀렉트박스(다수)제어하기.

2005.02.19 16:00

Xian

상위셀렉트(부모)의 값이 변경되면 나머지 다수의 하위셀렉트(자식)가 변경됩니다.
다중셀렉트라고 할수도 있겠네요...^^

먼저 상위 셀렉트를 자동차(그룹1)와 오토바이(그룹2)를 주겠습니다.
그리고 하위에는 그룹1에는 기아, 현대, 대우를 주고 그룹2에는 대림,가와사키,비엠베라고 주겠습니다.
하위셀렉트에는 해당 제조사의 자동차나 오토바이의 종류가 나오게 하였습니다.

쉽게 말해 자동차를 선택하면 아래 자식 셀렉트박스 3개가 기아,현대,대우로 나오고
오토바이를 선택하면 역시 자식셀렉트박스3개가 대림,가와사키,비엠베로 나오는 것입니다..^^;;;;

소스를 봅니다.



<html>
<head>
<script language = "javascript">
//상위 셀렉트로 하위 셀렉트 제어하기
function showSub(obj) {

    f = document.forms.select_machine;

    if(obj == 1) {
    
        f.SUB1.style.display = "";
        f.SUB2.style.display = "";
        f.SUB3.style.display = "";
        f.SUB4.style.display = "none";
        f.SUB5.style.display = "none";
        f.SUB6.style.display = "none";

    } else {

        f.SUB1.style.display = "none";
        f.SUB2.style.display = "none";
        f.SUB3.style.display = "none";
        f.SUB4.style.display = "";
        f.SUB5.style.display = "";
        f.SUB6.style.display = "";

     }
}
</script>
</head>

<body>


<form name="select_machine">

//상위 셀렉트박스
<select name=" " onChange="showSub(this.options[this.selectedIndex].value);">
<option value="1">자동차</option>
<option value="2">오토바이</option>
</select>

<br><br>

//여기부턴 하위셀렉트박스
<select name="SUB1" style="display: ;">
<option value=" ">기아자동차</option>
<option value=" ">스포티지</option>
<option value=" ">오피러스</option>
<option value=" ">소렌토</option>
<option value=" ">카니발</option>
</select>


<select name="SUB2" style="display: ;">
<option value=" ">현대자동차</option>
<option value=" ">소나타</option>
<option value=" ">산타페</option>
<option value=" ">투산</option>
</select>


<select name="SUB3" style="display: ;">
<option value=" ">대우자동차</option>
<option value=" ">매그너스</option>
<option value=" ">마티즈</option>
</select>


<select name="SUB4" style="display: none;">
<option value=" ">대림오토바이</option>
<option value=" ">시티100</option>
<option value=" ">엑시브</option>
</select>


<select name="SUB5" style="display: none;">
<option value=" ">가와사키오토바이</option>
<option value=" ">ZXR400</option>
<option value=" ">ZX6R</option>
<option value=" ">ZX10R</option>
<option value=" ">ZX12R</option>
</select>


<select name="SUB6" style="display: none;">
<option value=" ">비엠베오토바이</option>
<option value=" ">R1150GS</option>
<option value=" ">R1100RT</option>
<option value=" ">K1200LT</option>
</select>

</form>
</body>
</html>


head사이의 자바스크립트가 form안에 있는 셀렉트박스를 제어합니다.
SUB1~6은 하위셀렉트박스 이름입니다. 이름을 가지고 있어야 컨트롤이 되겠죠?

간단하죠? 어렵진 않다고 보는데.....


뱀다리.
다썼다가 로그인풀려서 다시 썼습니다.=ㅅ=
다시 쓸라니 귀찮아져서 좀 성의 없게 간단간단히 되었네요..
이해해주세요. 다 이해하시리라고 믿습니다..^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
구글애드센스 한페이지에 3개 초과하시면 안됩니다. [3] 최윤한 2016.11.11
모바일환경에서, 스케치북스킨의 경우 포인트레벨아이콘이나 닉네임이미지 가 안 나타나는 경우 수정법 sejin7940 2016.11.13
관리자페이지의 게시판 목록에서 '모듈분류'로만 검색이 안 되는 버그 수정 sejin7940 2016.11.09
Bash Shell 버그 패치 필요 [2] 고구마군 2014.09.29
클라우드 플레어 질문있습니다. [2] 생컨38889 2016.08.31
가입 메일 인증 SMTP 안되시는 분들 참고하세욤~ 네이버 메일 서버 사용. [4] file 테나 2012.12.08
확장변수 출력 방법 초 심플하게 적어봅니다. [15] 라르게덴 2009.03.16
윈도우 서버 2012 에서 제로보드XE 설치부터 사용하기. [16] file 부롱이 2013.03.29
내 작성글 보기에서 익명게시판에서 작성한 내 글도 보이게 하기 위해서 sejin7940 2016.10.19
사이트 운영하시는분들 단체메일 가급적 보내지 마세요. 최윤한 2016.10.19
관리자페이지 첫페이지에서 최근글 / 최근댓글 리스트에서 닉네임 대신에 날짜가 나오게 하는 방법 sejin7940 2016.10.19
포인트 사용시에도 그룹이 안 떨어지도록 하는 방법 [4] sejin7940 2013.10.18
첨부파일 업로드 되고 사라질때...즉 먹통이 될때....!! [3] 시카고코리아 2012.09.25
초보자분들 윈도우에 apmsetup 쓰지 마세요 느립니다. [1] 최윤한 2016.09.20
.htaccess 를 이용해서 도메인 접속시 xe폴더로 자동 이동 시키기 [3] file Double'U' 2014.09.25
우분투에 apm 서버 완벽하게 설치하기 로니 2016.09.13
무료 폰트 모음 boomstop 2016.09.13
에디터 "입력창 크기 자동조절" 체크를 기본으로 하기 [8] 투씨 2013.11.24
xe 쪽지 보내기창에 파일첨부하기 연동하는 팁 [7] 졸라맨 2014.04.09
xe 사이트에 응용프로그램으로 오토포스팅은 안됩니다. 최윤한 2016.08.17
태그 쓰기