javascript - 使用 Javascript 更改 html 可见性

Question

我浏览了许多不同的问答，试图找到一个我可以修改以实现我想做的事情的答案。我所拥有的是一种表格，它将用于公司内对同一表格有不同要求的不同“单位”。我正在尝试使用 JS(不使用 jQuery)根据选择的“单位”编号更改多个表格行的可见性。

选择框部分:

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

应该为某些“单位”隐藏的表格行:

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

我什至尝试去 W3Schools 寻找答案，但是他们使用的示例不适用于我的表格。

Answer 1

你调用了错误的方法。

试试...

document.getElementById("frig1").style.visibility = 'visible'

这是 visibility 属性的语法:

visibility: visible|hidden|collapse|initial|inherit;