我有三个文本字段，我想在选择选项 1 时显示第一个并隐藏第二个和第三个，而在选择选项 2 时则相反。
我做了以下事情:
<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/ ，这部分没有按照我提到的方式工作
最佳答案
如果你选择使用纯 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;
}
还有Maggie修改的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起来吧!
关于Javascript 在选择时隐藏字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17597550/