javascript - 选择选项后无法显示隐藏的 div

Question

我在选择任一选项后无法显示隐藏的 div。目前我已经完成了它的 javascript 代码。

这是我的 HTML 代码:

Customer Type:
<select name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret" onClick="custType(this.value)">Customer</option>
    <option value="trd" onClick="custType(this.value)">Trade</option>
</select>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">Company Name
    <input type="text" name="companyName" id="companyName" />
</div>

这是我当前的 Javascript 代码:

function custType(val) {
    if (val == "trd") {
        document.getElementById("tradeCustDetails").style.visibility = "visible";
        document.getElementById("retCustDetails").style.visibility = "hidden";
    }

    if (val == "ret") {
        document.getElementById("tradeCustDetails").style.visibility = "hidden";
        document.getElementById("retCustDetails").style.visibility = "visible";
    }
}

我通过 stackoverflow 做了一些研究，并通过 JSFiddle 找到了解决方案但该代码不适用于我的文件。谁能帮我解决这个问题。谢谢。

Answer 1

你可以像这样使用onchange事件

function custType(val){
    document.getElementById("tradeCustDetails").style.visibility =val == "trd" ? "visible": 'hidden';
    document.getElementById("retCustDetails").style.visibility =val == "ret" ? "visible": 'hidden';
}

演示:Fiddle