웹마스터 팁

  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은 하위셀렉트박스 이름입니다. 이름을 가지고 있어야 컨트롤이 되겠죠?

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


뱀다리.
다썼다가 로그인풀려서 다시 썼습니다.=ㅅ=
다시 쓸라니 귀찮아져서 좀 성의 없게 간단간단히 되었네요..
이해해주세요. 다 이해하시리라고 믿습니다..^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
member 모듈 메일인증을 사용할때 모바일 기본스킨에서 회원가입 후 이메일 발송 안내 띄우기 [2] file 후하니 2015.08.01
새로고침 없는 실시간 웹서비스를 위한 기술과 간략한 역사(?) [1] onTrust 2015.07.27
[실험팁] XE 고용량/큰사진 썸네일 깨지는 것 해결 socialskyo 2015.07.20
레이아웃 메뉴에서 메뉴옆에 글수 표시하기 반걸 2015.07.20
DB에서 직접 시퀀스 생성하기 [3] 기진곰 2015.07.18
CloudFlare 사용시 방문자 IP와 SSL 접속여부가 정확하게 파악되지 않는 문제 해결법 [4] 기진곰 2015.07.12
IIS서버 자동 설치 프로그램(PHP, MySQL, phpMyAdmin) [1] 공처아찌 2015.07.12
모바일에 최적화된 화면으로 보기 문구가 레이아웃을 가리는 문제 creative8 2015.07.11
config 파일을 일반 유저가 쓸 수 없는 문제 해결법 [15] wkp 2015.07.09
문서페이지가 수정이 되지 않는 문제 [2] file monet 2015.07.07
위젯 가운데 정렬 하는법 [3] 불금 2015.07.05
홈페이지 제작 시 점검사항 15가지 [1] 유래유거 2015.06.29
사이트 서버 운영체제와 사용하는 웹서버 소프트웨어 알아보는 사이트 file 후하니 2015.06.28
홈페이지 속도가 느린 이유.(팁같지도 않은 팁) [11] 가브리엘조 2015.06.27
cloudflare api 용 curl 기본값 마루디자인 2015.06.24
추천검색어,실시간인기순위 소스 file codlllle 2015.06.21
실시간 rss 피드글 출력 위젯 file codlllle 2015.06.20
다음 위젯 뱅크를 대신할 위젯 베스트! codlllle 2015.06.20
자신이 쓴 글에 특정유저 댓글을 차단 Ikoo 2015.06.20
다음 실시간 검색어 위젯 file codlllle 2015.06.19
태그 쓰기