웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
상위 셀렉트박스 값 변경시 하위셀렉트박스(다수)제어하기.
2005.02.19 16:00
상위셀렉트(부모)의 값이 변경되면 나머지 다수의 하위셀렉트(자식)가 변경됩니다.
다중셀렉트라고 할수도 있겠네요...^^
먼저 상위 셀렉트를 자동차(그룹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은 하위셀렉트박스 이름입니다. 이름을 가지고 있어야 컨트롤이 되겠죠?
간단하죠? 어렵진 않다고 보는데.....
뱀다리.
다썼다가 로그인풀려서 다시 썼습니다.=ㅅ=
다시 쓸라니 귀찮아져서 좀 성의 없게 간단간단히 되었네요..
이해해주세요. 다 이해하시리라고 믿습니다..^^
다중셀렉트라고 할수도 있겠네요...^^
먼저 상위 셀렉트를 자동차(그룹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은 하위셀렉트박스 이름입니다. 이름을 가지고 있어야 컨트롤이 되겠죠?
간단하죠? 어렵진 않다고 보는데.....
뱀다리.
다썼다가 로그인풀려서 다시 썼습니다.=ㅅ=
다시 쓸라니 귀찮아져서 좀 성의 없게 간단간단히 되었네요..
이해해주세요. 다 이해하시리라고 믿습니다..^^
제목 | 글쓴이 | 날짜 |
---|---|---|
아이콘 폰트 축소 서비스 | easylogic | 2016.08.11 |
XE Core:1.7.5.3 조회수 증가, 자기 게시글 클릭시 조회수 증가 [1] | 때린데 또때려 | 2014.07.04 |
상위 셀렉트박스 값 변경시 하위셀렉트박스(다수)제어하기. [2] | Xian | 2005.02.19 |
포트포워딩없이 외부접속 허용하기(윈도우 서버) [1] | 임채원임 | 2014.11.17 |
CentOs7에서 중국 IP 차단하기 [5] | 카르마 | 2016.06.02 |
메인메뉴 빵조각메뉴 서로 다르게 하고 싶을때 | 미연조 | 2016.07.08 |
하나의 웹서버에 php5, php7 설치하기 | 라온넷닷컴 | 2016.06.10 |
배너 랜덤추출 스크립트 [xe적용방법] [16] | 라싸 | 2008.02.19 |
비싼호스팅 쓰지말고 공유기로 돌리자(컴보다 더 쉽다니!!) [1] | djdisodo | 2016.06.04 |
CentOS 7 : Apache2.4 + PHP5.6 + MariaDB + VSFTP 설치하기 [6] | 우리아기 | 2015.08.06 |
[추천 팁] 오에카키 PHP 버전으로 만들기 [19] | 소프트맨 | 2002.08.31 |
사용자정의 기준으로 정렬을 했을 경우 최신글이 목록 상단으로 뜨도록 수정법 ( 현재 최신글이 하단에 뜸 ) | sejin7940 | 2016.05.25 |
부운영자 [26] | 송동우 | 2012.02.05 |
정확한 계산기 소스입니다. [2] | 현탁 | 2014.01.15 |
[시니시즘] XE의 XML Query 관련 팁 | 시니시즘 | 2016.04.26 |
[개발팁] Console에서 디버깅 시 발생하는 x.js Deprecated 오류 제거 하기 | SimpleCode | 2016.04.19 |
IIS에서의 URL 재작성 사용하기 [5] | ehii | 2014.10.30 |
SEO 1.8.18 에서 Analytics 와 기타 탭 작동 안 하는 버그 수정법 | sejin7940 | 2016.04.03 |
그룹별 회원 목록 출력 [2] | 윤삼 | 2015.10.25 |
위지윅 에디터의 관리의 활성 비활성이 안될 경우 해결책 [2] | 김유중345 | 2009.05.01 |
즉, 3가지 셀렉트가 있다고 할때,
제일 마지막 선택값만(예:ZXR400)을 제로보드 검색에 적용하고자 합니다.
다르게 예를 들면 셀렉트 3개 검색버튼하나.
이 상태에서 오토바이 > 가와사키오토바이 >ZX6R 에 맞추고 검색버튼을 눌러서 검색하고자 합니다.
아시는분 리플 좀 부탁합니다.