Javascript隐藏选择字段
[英] Javascript hide fields on select
本文介绍了Javascript隐藏选择字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有三个文本字段，我想在选择选项 1 时显示第一个并隐藏第二个和第三个，选择选项 2 时则相反.
我做了以下事情:
<body onload='hola(1)'><label class="field6" for="shower_times">每个人每天需要多少次淋浴:</label><SELECT name="shower_times" onChange="hola(this.value)"><OPTION value="1">1</OPTION><OPTION value="2">2</OPTION><div id="div1"><BR><label class="field6" for="hour">淋浴时间:</label><input type="text" name="hour" class="input">
<div id="div2"><label class="field6" for="hour1">第一次淋浴的小时数:</label><input type="text" name="hour1" class="input"><BR><label class="field6" for="hour2">第二次淋浴的小时数:</label><input type="text" name="hour2" class="input">
当我更改选项时它正在工作，但问题是一开始我希望它只显示第一个字段，这就是我使用的原因
但它不起作用，它在开头显示了所有三个.
代码似乎可以单独工作，但是当我将它添加到其他代码时，就像这个 http://jsfiddle.net/3YZBm/1/ ，这部分不像我提到的那样工作
解决方案
如果你选择使用纯 JS，你可以这样做...
HTML(稍作修改)...
<label class="field6" for="shower_times">每个人每天需要多少次淋浴:</label><SELECT name="shower_times" id="mselect" onChange="hola();"><OPTION value="1">1</OPTION><OPTION value="2">2</OPTION><div id="div1"><BR><label class="field6" for="hour">淋浴时间:</label><input type="text" name="hour" class="input">
<div id="div2"><label class="field6" for="hour1">第一次淋浴的小时数:</label><input type="text" name="hour1" class="input"><BR><label class="field6" for="hour2">第二次淋浴的小时数:</label><input type="text" name="hour2" class="input">
CSS(默认情况下可以选择隐藏 2 个字段，因为默认情况下选择了 1 个)...
#div2 {显示:无；}
还有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");如果(mselectvalue == 2){mdivtwo.style.display = "block";mdivone.style.display = "无";}别的 {mdivtwo.style.display = "无";mdivone.style.display = "block";}}
和 Maggie 修改后的解决方案支持！
I have three text fields, I want to show the first and hide the second and third when option 1 is selected, and the opposite when option two is selected.
I did the following:
<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>
It's working find when I change the option, but the problem is that at the beginning I want it to show only the first field, that's why I used
<body onload='hola(1)'>
but it's not working, it's showing all three at the beginning.
the code seems to work alone,
but all when I add it to other codes as this one http://jsfiddle.net/3YZBm/1/ , this part is not working the way I mentioned
解决方案
If you choose to go with pure JS, you could do something like this...
The HTML (slightly modified)...
<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>
The CSS (optional to hide the 2 fields by default since 1 is selected by default)...
#div2 {
display:none;
}
And the JS modified by Maggie...
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";
}
}
and Maggie's modified solution to back it up!
这篇关于Javascript隐藏选择字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
