셀렉트박스 비교 페이지 만들고싶습니다
본문
http://kinimage.naver.net/20171227_105/1514362080830S979j_JPEG/%C1%F6%BD%C4%C0%CE.jpg">
이런식으로 2가지 모델을 비교하는 페이지로 만들고 싶습니다.
다중 셀렉트 박스를 이용해서 하는 방법을 찾고있는데
표 안에 모델명 대메뉴, 소메뉴를 넣고 그에 맞는 내용이 나오게끔 하고싶은데
하나는 가능한데 표안에 두개를 넣으려니깐 오류가 납니다
도와주세요 ㅠㅠㅠ
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<script language="javascript" type="text/javascript">
function isShowDivv(loc,type) {
if (type == 1){
document.all.part01.style.display = 'none';
document.all.part02.style.display = 'none';
document.all.part03.style.display = 'none';
switch(loc) {
case '1' :
document.all.part01.style.display = 'block';
break;
case '2' :
document.all.part02.style.display = 'block';
break;
case '3' :
document.all.part03.style.display = 'block';
break;
}
}else{
document.all.parta01.style.display = 'none';
document.all.parta02.style.display = 'none';
document.all.parta03.style.display = 'none';
switch(loc) {
case '1' :
document.all.parta01.style.display = 'block';
break;
case '2' :
document.all.parta02.style.display = 'block';
break;
case '3' :
document.all.parta03.style.display = 'block';
break;
}
}
}
function isShowDiv(loc) {
switch(loc) {
case '선택1' :
document.getElementById("div01").style.display = "block";
document.getElementById("div02").style.display = "none";
document.getElementById("cate_2").selectedIndex = 0;
break;
case '선택2' :
document.getElementById("cate_1").selectedIndex = 0;
document.getElementById("div02").style.display = "block";
document.getElementById("div01").style.display = "none";
break;
}
}
</script>
</head>
<body>
<div style="margin-bottom:10px;">
<select name="cate" id="cate" onChange="isShowDiv(this.value)">
<option value=''>선택</option>
<option value='선택1'>선택1</option>
<option value='선택2'>선택2</option>
</select>
</div>
<div id="div01" style="display:none;">
<select name="cate_1 rm_part" id="cate_1" onChange="isShowDivv(this.value,1)" style='width:100px;'>
<option value="1">항목1</option>
<option value="2">항목2</option>
<option value="3">항목3</option>
</select>
<tr height=25>
<td width="593" bgcolor="#F9F8F3">
<div id="part01" style="display:block">항목1 내용</div>
<div id="part02" style="display:none">항목2 내용</div>
<div id="part03" style="display:none">항목3 내용</div>
</td>
</tr>
</div>
<div id="div02" style="display:none;">
<select name="cate_2 rm_parta" id="cate_2" onChange="isShowDivv(this.value,2)" style='width:100px;'>
<option value="1">항목4</option>
<option value="2">항목5</option>
<option value="3">항목6</option>
</select>
<td width="593" bgcolor="#F9F8F3">
<div id="parta01" style="display:block">항목4 내용</div>
<div id="parta02" style="display:none">항목5 내용</div>
<div id="parta03" style="display:none">항목6 내용</div>
</td>
</div>
</body>
</html>
