使用Javascript来改变HTML的可见性 [英] Using Javascript to change html visibility
问题描述
我浏览了许多不同的问答，试图找到一个我可以修改的答案，以便为我正在尝试做的工作而努力。我拥有的是一种将用于公司内不同单位的表单，该表单对同一表单有不同的要求。我试图使用JS（不使用jQuery）来改变几个表行的可见性，这取决于选择了哪个单元号。
选择框部分：
< tr>
< td class =left>< span class =required> *< / span> Store Number：< / td>
< td>
< option value =>选择商店编号< / option>
< option value =010576> 010576< / option>
< option value =011169> 011169< / option>
< option value =008181> 008181< / option>
< option value =010324> 010324< / option>
< option value =008615> 008615< / option>
< option value =009150> 009150< / option>
< option value =014640> 014640< / option>
< option value =010684> 010684< / option>
< option value =011168> 011168< / option>
< option value =014215> 014215< / option>
< option value =008179> 008179< / option>
< option value =008339> 008339< / option>
< option value =008668> 008668< / option>
< option value =031574> 031574< / option>
< / select>
< / td>
< / tr>
对于某些单位应该隐藏的表格行：
< tr id =frig1style =visibility：hidden;>
< td class =left>< span class =required> *< / span>制冷单元＃1：< / td>
< td>< input name =refrig1type =textrequired id =refrig1size =3onChange =coldValidate（this）>< / td>
< td class =noborder>< / td>
< / tr>
< tr id =frig2>
< td class =left>< span class =required> *< / span>制冷单元＃2：< / td>
< td>< input name =refrig2type =textrequired id =refrig2size =3onChange =coldValidate（this）>< / td>
< td class =noborder>< / td>
< / tr>
< tr id =frig3>
< td class =left>< span class =required> *< / span>制冷单元＃3：< / td>
< td>< input name =refrig3type =textrequired id =refrig3size =3onChange =coldValidate（this）>< / td>
< td class =noborder>< / td>
< / tr>
JavaScript函数我试过了：
function salad（）{
var storenumber = document.getElementById（storenumber）;
switch（storenumber.value）{
case010576：
document.getElementById（frig1）。style.value =visible;
休息;
案例011169：
break;
case008181：
document.getElementById（frig1）。style.value =visible;
休息;
案例010324：
案例008615：
案例009150：
break;
}
}
我甚至试着去W3School找到回答，但是他们使用的示例不适用于我的表单。
您正在调用错误的方法。
..
document.getElementById（frig1）。style.visibility ='visible'>
这是
可见性属性的语法：visibility：visible | hidden | collapse | initial | inherit;
I have looked through many different Q&A trying to find an answer that I could modify to work for what I am trying to do. What I have is a form which will be used for different "units" within a company that have different requirements for the same form. I am trying to use JS (without using jQuery) to change the visibility of several of the table rows depending on which "unit" number is selected.
Selection box section:
<tr> <td class="left"><span class="required">*</span>Store Number:</td> <td> <select id="storenumber" name="storenumber" required title="Please select your store ID number" onChange="salad()"> <option value="">Select Store Number</option> <option value="010576">010576</option> <option value="011169">011169</option> <option value="008181">008181</option> <option value="010324">010324</option> <option value="008615">008615</option> <option value="009150">009150</option> <option value="014640">014640</option> <option value="010684">010684</option> <option value="011168">011168</option> <option value="014215">014215</option> <option value="008179">008179</option> <option value="008339">008339</option> <option value="008668">008668</option> <option value="031574">031574</option> </select> </td> </tr>Table rows which should be hidden for some "units":
<tr id="frig1" style="visibility: hidden;"> <td class="left"><span class="required">*</span>Refrigeration Unit #1:</td> <td><input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)"></td> <td class="noborder"></td> </tr> <tr id="frig2"> <td class="left"><span class="required">*</span>Refrigeration Unit #2:</td> <td><input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)"></td> <td class="noborder"></td> </tr> <tr id="frig3"> <td class="left"><span class="required">*</span>Refrigeration Unit #3:</td> <td><input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)"></td> <td class="noborder"></td> </tr>JavaScript function I have tried:
function salad() { var storenumber = document.getElementById("storenumber"); switch(storenumber.value) { case "010576": document.getElementById("frig1").style.value = "visible"; break; case "011169": break; case "008181": document.getElementById("frig1").style.value = "visible"; break; case "010324": case "008615": case "009150": break; } }I have even tried to go to W3Schools to find the answer, however the example they use does not work with my form.
解决方案You are calling the wrong method.
Just try...
document.getElementById("frig1").style.visibility = 'visible'This is the syntax for the
visibilityproperty:visibility: visible|hidden|collapse|initial|inherit;
这篇关于使用Javascript来改变HTML的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
