Javascript隱藏字段選擇

我有三個文本字段，我想顯示第一個，當選擇選項1時隱藏第二個和第三個，選擇第二個選項時隱藏第二個和第三個。Javascript隱藏字段選擇

我做了以下內容：

<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)'>

但它不起作用，它在開頭顯示所有三個。

代碼似乎當我把它添加到其他的代碼，因爲這一個http://jsfiddle.net/3YZBm/1/單獨工作，但所有，這部分是不工作我提到

來源

2013-07-11 maggie

爲什麼不把第二個和第三個設置爲默認不顯示加載？ I.E.設置他們的可見性隱藏與CSS類或行。 –

您的代碼正常工作。無論問題是什麼，它似乎都不在您提供的代碼中。 –

似乎運行良好http://jsfiddle.net/j08691/TaeCp/ – j08691

的方式，如果你選擇去用純JS，你可以做這樣的事情......

的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（可選隱藏2場在默認情況下，因爲1被默認選中）...

#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"; 
     } 
}

和Maggie的修改的方案to back吧！

來源

2013-07-11 15:41:32 blackhawk

-1沒有人需要簡單的JavaScript的jQuery。 OP有一個需要解決的具體問題。這不會幫助OP發現問題所在。 –

@blachawk我檢查了演示，這不是我想要的 – maggie

你想要它嗎？ – blackhawk

Javascript隱藏字段選擇

回答

相關問題