클릭하면 셀렉트박스가 사라집니다 ㅜ
본문
셀렉트박스 선택1을 누르면 항목 셀렉트박스가 나오고 그에 맞는 내용이 나오게 하고싶습니다.
1은 되는데 선택2에서 항목을 누르면 사라지는데
방법 아시는분 부탁드릴게요 ㅠㅠ
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<script language="javascript" type="text/javascript">
function isShowDivv(loc) {
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;
}
}
<!--두번째-->
function isShowDiv(loc) {
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) {
document.getElementById("div01").style.display = "none";
document.getElementById("div02").style.display = "none";
switch(loc) {
case '선택1' :
document.getElementById("div01").style.display = "block";
document.getElementById("cate_2").selectedIndex = 0;
break;
case '선택2' :
document.getElementById("cate_1").selectedIndex = 0;
document.getElementById("div02").style.display = "block";
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)" 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="isShowDiv(this.value)" 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>
답변 2
<select name="cate_2 rm_parta" id="cate_2" onchange="isShowDiv(this.value)" style='width:100px;'>
에서
="cate_2 rm_part"
요렇게 고쳐주세요 a가 들어가있습니다.
같은형식/패턴의 코딩을할땐 항상 오타를 잘 확인해주는 센스~
<script>
function isShowDivv(obj) {
var text = obj.options[obj.selectedIndex].text;
document.getElementById("cate_select").innerHTML = obj.value + ' => ' + text;
}
function isShowDiv(loc) {
document.getElementById("div01").style.display = loc == '선택1' ? 'block' : 'none';
document.getElementById("div02").style.display = loc == '선택2' ? 'block' : 'none';
}
</script>
<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" id="cate_1" onchange="isShowDivv(this)" style='width:100px;'>
<option value="1">항목1</option>
<option value="2">항목2</option>
<option value="3">항목3</option>
</select>
</div>
<div id="div02" style="display:none;">
<select name="cate_2" id="cate_2" onchange="isShowDivv(this)" style='width:100px;'>
<option value="4">항목4</option>
<option value="5">항목5</option>
<option value="6">항목6</option>
</select>
</div>
<div id="cate_select"></div>
엌ㅋㅋㅋㅋ아예 스크립트를 줄여주셨네요 ㅋㅋㅋㅋㅋ
