자바 스크립트 숨기기 필드 선택

텍스트 필드가 세 개 있습니다. 옵션 1을 선택하면 두 번째와 세 번째를 숨기고, 두 번째 옵션을 선택하면 반대쪽을 숨기려고합니다. 내가 옵션을 변경할 때 그것은 찾기 일하고 있지만, 문제는 처음에 나는 그것이 첫 번째 필드를 표시 할 것입니다자바 스크립트 숨기기 필드 선택

<script language="javascript"> 

     function hola(x) { 

      if(x == 1) { 
       document.getElementById("div1").style.visibility="visible"; 
       document.getElementById("div2").style.visibility="hidden"; 
      } 

      if(x == 2) { 
       document.getElementById("div1").style.visibility="hidden"; 
       document.getElementById("div2").style.visibility="visible"; 
      } 
     } 
    </script> 

<body onload='hola(1)'> 

<label class="field6" for="shower_times">how many showers each takes per day: </label> 
<SELECT name="shower_times" onChange="hola(this.value)"> 
<OPTION value="1">1</OPTION> 
<OPTION value="2">2</OPTION> 
</SELECT> 

<div id="div1"> 
<BR> 
<label class="field6" for="hour"> hour of the shower: </label><input type="text" name="hour" class="input"> 
</div> 

<div id="div2"> 
<label class="field6" for="hour1">hour of first shower: </label><input type="text" name="hour1" class="input"> 
<BR> 
<label class="field6" for="hour2">hour of second shower: </label><input type="text" name="hour2" class="input"> 
</div>

내가

을 사용하는 이유, 그건 :

나는 다음과 같은했다

<body onload='hola(1)'>

하지만 작동하지 않습니다. 처음 세 개를 모두 보여줍니다.

는

코드는 수, 당신은 순수 JS와 함께 이동하도록 선택하는 경우이 부분은 내가

출처

2013-07-11 maggie

두 번째와 세 번째를 기본값으로 설정하면로드시 표시되지 않는 이유는 무엇입니까? I.E. css 클래스 또는 라인에 숨겨진 상태로 가시성을 설정하십시오. –

코드가 정상적으로 작동합니다. 문제가 무엇이든, 당신이 제공 한 코드에는없는 것 같습니다. –

정상적으로 작동하는 것 같습니다. http://jsfiddle.net/j08691/TaeCp/ – j08691

을 언급 한 방법을 작동하지 않습니다, 나는이 일 http://jsfiddle.net/3YZBm/1/로 다른 코드에 추가 할 때, 혼자 를 제외하고 모두 작동하는 것 같다 (1은 기본적으로 선택되어 있기 때문에 기본적으로이 개 필드를 숨길 옵션) ...

...

html로 (약간 수정) ...

<label class="field6" for="shower_times">how many showers each takes per day: </label> 
<SELECT name="shower_times" id="mselect" onChange="hola();"> 
<OPTION value="1">1</OPTION> 
<OPTION value="2">2</OPTION> 
</SELECT> 
<div id="div1"> 
<BR> 
<label class="field6" for="hour"> hour of the shower: </label><input type="text" name="hour" class="input"> 
</div> 

<div id="div2"> 
<label class="field6" for="hour1">hour of first shower: </label><input type="text" name="hour1" class="input"> 
<BR> 
<label class="field6" for="hour2">hour of second shower: </label><input type="text" name="hour2" class="input"> 
</div> 
</div>

CSS의를 같은 것을 할

#div2 { 
display:none; 
}

그리고 매기에 의해 수정 된 JS ...

function hola() { 
    var mselect = document.getElementById("mselect"); 
    var mselectvalue = mselect.options[mselect.selectedIndex].value; 
    var mdivone = document.getElementById("div1"); 
    var mdivtwo = document.getElementById("div2"); 

     if (mselectvalue == 2) { 
     mdivtwo.style.display = "block"; 
     mdivone.style.display = "none"; 

     } 
     else { 
     mdivtwo.style.display = "none"; 
     mdivone.style.display = "block"; 
     } 
}

와 매기의 수정 솔루션 to back 그것을!

출처

2013-07-11 15:41:32 blackhawk

-1 단순한 JavaScript를 위해 jQuery가 필요한 사람은 아무도 없습니다. OP에는 해결해야 할 특정 문제가 있습니다. 이것은 OP가 문제가 무엇인지 발견하는 데 도움이되지 않습니다. –

@blachawk 데모를 확인했는데 그게 내가 원하는 바가 아냐 – maggie

어떻게 원하니? – blackhawk

자바 스크립트 숨기기 필드 선택

답변

관련 문제