选择一个选项后无法显示隐藏的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';
}

演示： 小提琴

Answer 2

您的代码对我有用。 但是...。我认为您也忘记了创建第二个div，或者您不只是将其包含在问题中。 我在onlinehtmleditor上试过了 ，效果很好。 我刚刚创建了第二个股利：

id=retCustDetails

Answer 3

我已经找到问题的答案。 我只需要将onclick更改为onchange。 现在工作正常。 谢谢回答我的问题