웹마스터 팁

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

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


뱀다리.
다썼다가 로그인풀려서 다시 썼습니다.=ㅅ=
다시 쓸라니 귀찮아져서 좀 성의 없게 간단간단히 되었네요..
이해해주세요. 다 이해하시리라고 믿습니다..^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
제로보드 XE - 오토셋에 설치하기 [11] file 차오이 2007.08.11
로그인 안되시는분들 참고 [8] 화니478 2007.08.14
설치 후 로그인 불가능 문제 해결방법 [14] 엘핀라즈 2007.08.14
최근글 및 카운터 로그인등등.. 모르시는분있을꺼라고 생각해서올려요 [7] file 장재혁512 2007.08.15
외부에서 회원정보 불러오기 [5] 미오유 2007.08.15
OpenID 적용 [6] file 맑은하늘75 2007.08.20
(수정) ZBXE 설치/로그인 등이 안될 때 시도해보세요. (MySQL DB) 핑크플로이드 2007.08.20
zbxe 일주일 사용기 및 팁 [1] 팔공산 2007.08.21
로그인 불가 - APM 관리자일 때 (일반적인 경우 아님) [3] Sx3 2007.08.26
관리자 아이디 사용제한 체크하는 어이없는 실수 & 해결 [5] refree 2007.09.01
회원에게는 구글 애드센스 보이지 않게 하기 [2] 스컬리지금어디야 2007.09.05
메인 페이지 링크 www. 주소 표시, 로그인 링크 문제.... [5] 마덴나 2007.09.08
(포인트 모듈) 추가 정보 출력 [8] file Simulz 2007.09.20
<수정>사이트 메신저 회원 연동해서 사용하기.... [3] 녀석참 2007.09.22
xe 폴더를 어딘가로 이전했을 때 로그인이 안되는 경우... [2] preware 2007.10.05
경험에 의지한 로그인 풀림현상 처리 남국 2007.10.06
상단에 로그인 회원가입 등 메뉴 넣기 (id/pw찾기 추가) [7] mireu 2007.10.16
ZBXE용 모니위키 연동 플러그인 소스 [4] 베니 2007.10.17
로그인/로그아웃 화면 첨부합니다. 이미지 변경법좀 ... [1] file 홍제헌 2007.10.30
제로보드xe 연동 프리하드2 설치방법 [8] hoaopoyoy 2007.11.03
태그 쓰기