클릭하면 셀렉트박스가 사라집니다 ㅜ

클릭하면 셀렉트박스가 사라집니다 ㅜ

QA

클릭하면 셀렉트박스가 사라집니다 ㅜ

본문

셀렉트박스 선택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>

답변을 작성하시기 전에 로그인 해주세요.
전체 117
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT